@xsynaptic/sonic-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Alexander Synaptic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,38 @@
+# @xsynaptic/sonic-ui
+
+Native custom elements for audio interfaces: dials, sliders, keys, a segmented switch, a peak meter and a screen panel. 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.
+
+## Setup
+
+```sh
+pnpm add @xsynaptic/sonic-ui
+```
+
+```js
+import '@xsynaptic/sonic-ui/define';
+```
+
+```css
+@layer base, sonic, components;
+
+@import '@xsynaptic/sonic-ui/controls.css';
+@import '@xsynaptic/sonic-ui/skins/slate.css';
+```
+
+```html
+<sonic-dial aria-label="Cutoff" value="40"></sonic-dial>
+<sonic-slider aria-label="Send" value="30"></sonic-slider>
+<sonic-key aria-label="Mute" toggle>…</sonic-key>
+```
+
+The styles sit in `@layer sonic`, so list it after your resets. A skin (`slate`, `lime` or `ivory`) applies under `.sonic-skin-<name>` on any ancestor. The package root exports the classes without registering them, for your own tag names.
+
+## Browsers
+
+Current Chrome and Edge, Safari 26 and Firefox 147.
+
+## License
+
+MIT

package/dist/define/dial.d.ts

@@ -0,0 +1,2 @@
+import { SonicDial } from "../elements/dial.js";
+export type { SonicDial };

package/dist/define/dial.js

@@ -0,0 +1,8 @@
+import { defineOnce } from "../elements/define-once.js";
+import { SonicDial } from "../elements/dial.js";
+
+//#region src/define/dial.ts
+defineOnce("sonic-dial", SonicDial);
+
+//#endregion
+//# sourceMappingURL=dial.js.map

package/dist/define/dial.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dial.js","names":[],"sources":["../../src/define/dial.ts"],"sourcesContent":["import { defineOnce } from '#elements/define-once.ts';\nimport { SonicDial } from '#elements/dial.ts';\n\ndefineOnce('sonic-dial', SonicDial);\n\n// Type-only, so the tag map augmentation ships without a runtime export\n/** @public */\nexport type { SonicDial } from '#elements/dial.ts';\n"],"mappings":";;;;AAGA,WAAW,cAAc,SAAS"}

package/dist/define/key.d.ts

@@ -0,0 +1,2 @@
+import { SonicKey } from "../elements/key.js";
+export type { SonicKey };

package/dist/define/key.js

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

package/dist/define/key.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"key.js","names":[],"sources":["../../src/define/key.ts"],"sourcesContent":["import { defineOnce } from '#elements/define-once.ts';\nimport { SonicKey } from '#elements/key.ts';\n\ndefineOnce('sonic-key', SonicKey);\n\n// Type-only, so the tag map augmentation ships without a runtime export\n/** @public */\nexport type { SonicKey } from '#elements/key.ts';\n"],"mappings":";;;;AAGA,WAAW,aAAa,QAAQ"}

package/dist/define/meter.d.ts

@@ -0,0 +1,2 @@
+import { SonicMeter } from "../elements/meter.js";
+export type { SonicMeter };

package/dist/define/meter.js

@@ -0,0 +1,8 @@
+import { defineOnce } from "../elements/define-once.js";
+import { SonicMeter } from "../elements/meter.js";
+
+//#region src/define/meter.ts
+defineOnce("sonic-meter", SonicMeter);
+
+//#endregion
+//# sourceMappingURL=meter.js.map

package/dist/define/meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.js","names":[],"sources":["../../src/define/meter.ts"],"sourcesContent":["import { defineOnce } from '#elements/define-once.ts';\nimport { SonicMeter } from '#elements/meter.ts';\n\ndefineOnce('sonic-meter', SonicMeter);\n\n// Type-only, so the tag map augmentation ships without a runtime export\n/** @public */\nexport type { SonicMeter } from '#elements/meter.ts';\n"],"mappings":";;;;AAGA,WAAW,eAAe,UAAU"}

package/dist/define/segmented.d.ts

@@ -0,0 +1,2 @@
+import { SonicSegmented } from "../elements/segmented.js";
+export type { SonicSegmented };

package/dist/define/segmented.js

@@ -0,0 +1,8 @@
+import { defineOnce } from "../elements/define-once.js";
+import { SonicSegmented } from "../elements/segmented.js";
+
+//#region src/define/segmented.ts
+defineOnce("sonic-segmented", SonicSegmented);
+
+//#endregion
+//# sourceMappingURL=segmented.js.map

package/dist/define/segmented.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented.js","names":[],"sources":["../../src/define/segmented.ts"],"sourcesContent":["import { defineOnce } from '#elements/define-once.ts';\nimport { SonicSegmented } from '#elements/segmented.ts';\n\ndefineOnce('sonic-segmented', SonicSegmented);\n\n// Type-only, so the tag map augmentation ships without a runtime export\n/** @public */\nexport type { SonicSegmented } from '#elements/segmented.ts';\n"],"mappings":";;;;AAGA,WAAW,mBAAmB,cAAc"}

package/dist/define/slider.d.ts

@@ -0,0 +1,2 @@
+import { SonicSlider } from "../elements/slider.js";
+export type { SonicSlider };

package/dist/define/slider.js

@@ -0,0 +1,8 @@
+import { defineOnce } from "../elements/define-once.js";
+import { SonicSlider } from "../elements/slider.js";
+
+//#region src/define/slider.ts
+defineOnce("sonic-slider", SonicSlider);
+
+//#endregion
+//# sourceMappingURL=slider.js.map

package/dist/define/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","names":[],"sources":["../../src/define/slider.ts"],"sourcesContent":["import { defineOnce } from '#elements/define-once.ts';\nimport { SonicSlider } from '#elements/slider.ts';\n\ndefineOnce('sonic-slider', SonicSlider);\n\n// Type-only, so the tag map augmentation ships without a runtime export\n/** @public */\nexport type { SonicSlider } from '#elements/slider.ts';\n"],"mappings":";;;;AAGA,WAAW,gBAAgB,WAAW"}

package/dist/define.d.ts

@@ -0,0 +1,11 @@
+import { SonicDial } from "./elements/dial.js";
+import "./define/dial.js";
+import { SonicKey } from "./elements/key.js";
+import "./define/key.js";
+import { SonicMeter } from "./elements/meter.js";
+import "./define/meter.js";
+import { SonicSegmented } from "./elements/segmented.js";
+import "./define/segmented.js";
+import { SonicSlider } from "./elements/slider.js";
+import "./define/slider.js";
+export type { SonicDial, SonicKey, SonicMeter, SonicSegmented, SonicSlider };

package/dist/define.js

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

package/dist/elements/define-once.js

@@ -0,0 +1,8 @@
+//#region src/elements/define-once.ts
+function defineOnce(tag, elementClass) {
+	if (!customElements.get(tag)) customElements.define(tag, elementClass);
+}
+
+//#endregion
+export { defineOnce };
+//# sourceMappingURL=define-once.js.map

package/dist/elements/define-once.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-once.js","names":[],"sources":["../../src/elements/define-once.ts"],"sourcesContent":["export function defineOnce(tag: string, elementClass: CustomElementConstructor): void {\n\tif (!customElements.get(tag)) customElements.define(tag, elementClass);\n}\n"],"mappings":";AAAA,SAAgB,WAAW,KAAa,cAA8C;CACrF,IAAI,CAAC,eAAe,IAAI,GAAG,GAAG,eAAe,OAAO,KAAK,YAAY;AACtE"}

package/dist/elements/dial.d.ts

@@ -0,0 +1,15 @@
+import { SonicRangeElement } from "./range-element.js";
+//#region src/elements/dial.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    'sonic-dial': SonicDial;
+  }
+}
+export declare class SonicDial extends SonicRangeElement {
+  #private;
+  static readonly observedAttributes: string[];
+  protected connect(signal: AbortSignal): void;
+  protected render(): void;
+}
+//#endregion
+//# sourceMappingURL=dial.d.ts.map

package/dist/elements/dial.js

@@ -0,0 +1,57 @@
+import { template } from "../lib/render.js";
+import { SonicRangeElement } from "./range-element.js";
+import { readPxProperty } from "../lib/read-px-property.js";
+
+//#region src/elements/dial.ts
+const renderDial = template(`
+		<div class="sonic-dial" role="slider" tabindex="0">
+			<div class="sonic-dial-notches"></div>
+			<div class="sonic-dial-ring"></div>
+			<div class="sonic-dial-modulation"></div>
+			<div class="sonic-dial-cap"></div>
+			<div class="sonic-dial-pointer"></div>
+			<div class="sonic-dial-readout" popover="manual">
+				<span></span>
+				<input
+					autocomplete="off"
+					class="sonic-dial-entry"
+					enterkeyhint="done"
+					hidden
+					spellcheck="false"
+					type="text"
+				/>
+			</div>
+		</div>
+	`, HTMLDivElement);
+const fallbackTravelPx = 160;
+var SonicDial = class extends SonicRangeElement {
+	static observedAttributes = [...SonicRangeElement.observedAttributes, "modulation"];
+	#dial = renderDial();
+	connect(signal) {
+		const dial = this.#dial;
+		this.appendOnce(dial);
+		this.render();
+		this.checkStyles(dial, "dial.css");
+		this.bindGestures(dial, signal, () => ({
+			position: (event) => -event.clientY,
+			travelPx: readPxProperty(getComputedStyle(dial), "--_sonic-dial-travel", fallbackTravelPx)
+		}));
+	}
+	render() {
+		const dial = this.#dial;
+		const positions = this.positions();
+		const modulated = this.fraction(this.value + this.numberAttribute("modulation", 0));
+		const value = this.fraction(this.value);
+		dial.style.setProperty("--_sonic-dial-value", String(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)));
+		if (positions === void 0) dial.style.removeProperty("--_sonic-dial-positions");
+		else dial.style.setProperty("--_sonic-dial-positions", String(positions));
+		this.renderAria(dial);
+	}
+};
+
+//#endregion
+export { SonicDial };
+//# sourceMappingURL=dial.js.map

package/dist/elements/dial.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dial.js","names":[],"sources":["../../src/elements/dial.ts"],"sourcesContent":["import { SonicRangeElement } from '#elements/range-element.ts';\nimport { readPxProperty } from '#lib/read-px-property.ts';\nimport { template } from '#lib/render.ts';\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sonic-dial': SonicDial;\n\t}\n}\n\nconst renderDial = template(\n\t/* HTML */ `\n\t\t<div class=\"sonic-dial\" role=\"slider\" tabindex=\"0\">\n\t\t\t<div class=\"sonic-dial-notches\"></div>\n\t\t\t<div class=\"sonic-dial-ring\"></div>\n\t\t\t<div class=\"sonic-dial-modulation\"></div>\n\t\t\t<div class=\"sonic-dial-cap\"></div>\n\t\t\t<div class=\"sonic-dial-pointer\"></div>\n\t\t\t<div class=\"sonic-dial-readout\" popover=\"manual\">\n\t\t\t\t<span></span>\n\t\t\t\t<input\n\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\tclass=\"sonic-dial-entry\"\n\t\t\t\t\tenterkeyhint=\"done\"\n\t\t\t\t\thidden\n\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tHTMLDivElement,\n);\n\nconst fallbackTravelPx = 160;\n\nexport class SonicDial extends SonicRangeElement {\n\tstatic override readonly observedAttributes = [\n\t\t...SonicRangeElement.observedAttributes,\n\t\t'modulation',\n\t];\n\n\treadonly #dial = renderDial();\n\n\tprotected connect(signal: AbortSignal): void {\n\t\tconst dial = this.#dial;\n\n\t\tthis.appendOnce(dial);\n\t\tthis.render();\n\t\tthis.checkStyles(dial, 'dial.css');\n\t\tthis.bindGestures(dial, signal, () => ({\n\t\t\tposition: (event) => -event.clientY,\n\t\t\t// Once per gesture; a computed style read per move forces a style recalc\n\t\t\ttravelPx: readPxProperty(getComputedStyle(dial), '--_sonic-dial-travel', fallbackTravelPx),\n\t\t}));\n\t}\n\n\tprotected render(): void {\n\t\tconst dial = this.#dial;\n\t\tconst positions = this.positions();\n\t\tconst modulated = this.fraction(this.value + this.numberAttribute('modulation', 0));\n\t\tconst value = this.fraction(this.value);\n\n\t\tdial.style.setProperty('--_sonic-dial-value', String(value));\n\t\tdial.style.setProperty('--_sonic-dial-origin', String(this.originFraction()));\n\t\tdial.style.setProperty('--_sonic-dial-modulation-from', String(Math.min(value, modulated)));\n\t\tdial.style.setProperty('--_sonic-dial-modulation-to', String(Math.max(value, modulated)));\n\t\tif (positions === undefined) dial.style.removeProperty('--_sonic-dial-positions');\n\t\telse dial.style.setProperty('--_sonic-dial-positions', String(positions));\n\t\tthis.renderAria(dial);\n\t}\n}\n"],"mappings":";;;;;AAUA,MAAM,aAAa,SACP;;;;;;;;;;;;;;;;;;;IAoBX,cACD;AAEA,MAAM,mBAAmB;AAEzB,IAAa,YAAb,cAA+B,kBAAkB;CAChD,OAAyB,qBAAqB,CAC7C,GAAG,kBAAkB,oBACrB,YACD;CAEA,AAAS,QAAQ,WAAW;CAE5B,AAAU,QAAQ,QAA2B;EAC5C,MAAM,OAAO,KAAK;EAElB,KAAK,WAAW,IAAI;EACpB,KAAK,OAAO;EACZ,KAAK,YAAY,MAAM,UAAU;EACjC,KAAK,aAAa,MAAM,eAAe;GACtC,WAAW,UAAU,CAAC,MAAM;GAE5B,UAAU,eAAe,iBAAiB,IAAI,GAAG,wBAAwB,gBAAgB;EAC1F,EAAE;CACH;CAEA,AAAU,SAAe;EACxB,MAAM,OAAO,KAAK;EAClB,MAAM,YAAY,KAAK,UAAU;EACjC,MAAM,YAAY,KAAK,SAAS,KAAK,QAAQ,KAAK,gBAAgB,cAAc,CAAC,CAAC;EAClF,MAAM,QAAQ,KAAK,SAAS,KAAK,KAAK;EAEtC,KAAK,MAAM,YAAY,uBAAuB,OAAO,KAAK,CAAC;EAC3D,KAAK,MAAM,YAAY,wBAAwB,OAAO,KAAK,eAAe,CAAC,CAAC;EAC5E,KAAK,MAAM,YAAY,iCAAiC,OAAO,KAAK,IAAI,OAAO,SAAS,CAAC,CAAC;EAC1F,KAAK,MAAM,YAAY,+BAA+B,OAAO,KAAK,IAAI,OAAO,SAAS,CAAC,CAAC;EACxF,IAAI,cAAc,QAAW,KAAK,MAAM,eAAe,yBAAyB;OAC3E,KAAK,MAAM,YAAY,2BAA2B,OAAO,SAAS,CAAC;EACxE,KAAK,WAAW,IAAI;CACrB;AACD"}

package/dist/elements/key.d.ts

@@ -0,0 +1,17 @@
+import { SonicElement } from "./sonic-element.js";
+//#region src/elements/key.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    'sonic-key': SonicKey;
+  }
+}
+export declare class SonicKey extends SonicElement {
+  #private;
+  static readonly observedAttributes: string[];
+  get pressed(): boolean;
+  set pressed(isPressed: boolean);
+  attributeChangedCallback(name: string): void;
+  protected connect(signal: AbortSignal): void;
+}
+//#endregion
+//# sourceMappingURL=key.d.ts.map

package/dist/elements/key.js

@@ -0,0 +1,99 @@
+import { SonicElement } from "./sonic-element.js";
+import { requireChild, template } from "../lib/render.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 SonicElement {
+	static observedAttributes = [
+		...SonicElement.observedAttributes,
+		"momentary",
+		"pressed",
+		"toggle"
+	];
+	get pressed() {
+		return this.hasAttribute("pressed");
+	}
+	set pressed(isPressed) {
+		this.toggleAttribute("pressed", isPressed);
+	}
+	#holder;
+	#key = renderKey();
+	attributeChangedCallback(name) {
+		if (name === "disabled" && this.disabled) this.#release();
+		this.#render();
+	}
+	connect(signal) {
+		const key = this.#key;
+		const cap = requireChild(key, ".sonic-key-cap", HTMLSpanElement);
+		this.upgradeProperty("pressed");
+		this.adoptChildren(() => {
+			const arrivals = [...this.childNodes].filter((node) => node !== key);
+			if (key.parentNode === this) cap.append(...arrivals);
+			else cap.replaceChildren(...arrivals);
+			this.appendOnce(key);
+		}, signal);
+		this.#render();
+		this.checkStyles(key, "key.css");
+		signal.addEventListener("abort", () => {
+			this.#release();
+		}, { once: true });
+		key.addEventListener("click", () => {
+			if (!this.hasAttribute("toggle")) return;
+			this.pressed = !this.pressed;
+			this.dispatchEvent(new Event("change", { bubbles: true }));
+		}, { signal });
+		this.#bindMomentary(key, signal);
+	}
+	#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.disabled || this.#holder !== void 0) return;
+		this.#holder = holder;
+		this.pressed = true;
+		this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	#isMomentary() {
+		return this.hasAttribute("momentary") && !this.hasAttribute("toggle");
+	}
+	#release() {
+		if (this.#holder === void 0) return;
+		this.#holder = void 0;
+		this.pressed = false;
+		this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	#render() {
+		const key = this.#key;
+		key.disabled = this.disabled;
+		key.removeAttribute("aria-pressed");
+		if (this.hasAttribute("toggle")) key.setAttribute("aria-pressed", String(this.pressed));
+		this.forwardNaming(key, true);
+	}
+};
+
+//#endregion
+export { SonicKey };
+//# sourceMappingURL=key.js.map

package/dist/elements/key.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"key.js","names":[],"sources":["../../src/elements/key.ts"],"sourcesContent":["import { SonicElement } from '#elements/sonic-element.ts';\nimport { requireChild, template } from '#lib/render.ts';\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sonic-key': SonicKey;\n\t}\n}\n\nconst renderKey = template(\n\t/* HTML */ `\n\t\t<button class=\"sonic-key\" type=\"button\"><span class=\"sonic-key-cap\"></span></button>\n\t`,\n\tHTMLButtonElement,\n);\n\nconst holdKeys = new Set([' ', 'Enter']);\n\nexport class SonicKey extends SonicElement {\n\tstatic override readonly observedAttributes = [\n\t\t...SonicElement.observedAttributes,\n\t\t'momentary',\n\t\t'pressed',\n\t\t'toggle',\n\t];\n\n\tget pressed(): boolean {\n\t\treturn this.hasAttribute('pressed');\n\t}\n\n\tset pressed(isPressed: boolean) {\n\t\tthis.toggleAttribute('pressed', isPressed);\n\t}\n\n\t// A pointer id or a key name\n\t#holder: number | string | undefined;\n\n\treadonly #key = renderKey();\n\n\tattributeChangedCallback(name: string): void {\n\t\tif (name === 'disabled' && this.disabled) this.#release();\n\t\tthis.#render();\n\t}\n\n\tprotected connect(signal: AbortSignal): void {\n\t\tconst key = this.#key;\n\t\tconst cap = requireChild(key, '.sonic-key-cap', HTMLSpanElement);\n\n\t\tthis.upgradeProperty('pressed');\n\t\tthis.adoptChildren(() => {\n\t\t\tconst arrivals = [...this.childNodes].filter((node) => node !== key);\n\n\t\t\t// Arrivals after a replacement take the icon's place\n\t\t\tif (key.parentNode === this) cap.append(...arrivals);\n\t\t\telse cap.replaceChildren(...arrivals);\n\t\t\tthis.appendOnce(key);\n\t\t}, signal);\n\t\tthis.#render();\n\t\tthis.checkStyles(key, 'key.css');\n\t\tsignal.addEventListener(\n\t\t\t'abort',\n\t\t\t() => {\n\t\t\t\tthis.#release();\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\n\t\tkey.addEventListener(\n\t\t\t'click',\n\t\t\t() => {\n\t\t\t\tif (!this.hasAttribute('toggle')) return;\n\n\t\t\t\tthis.pressed = !this.pressed;\n\t\t\t\tthis.dispatchEvent(new Event('change', { bubbles: true }));\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tthis.#bindMomentary(key, signal);\n\t}\n\n\t// Not `click`, which lands a tap late by the finger's dwell\n\t#bindMomentary(key: HTMLButtonElement, signal: AbortSignal): void {\n\t\tconst releasePointer = (event: PointerEvent): void => {\n\t\t\tif (event.pointerId === this.#holder) this.#release();\n\t\t};\n\n\t\tkey.addEventListener(\n\t\t\t'pointerdown',\n\t\t\t(event) => {\n\t\t\t\tif (event.button !== 0 || !this.#isMomentary()) return;\n\n\t\t\t\tkey.setPointerCapture(event.pointerId);\n\t\t\t\tthis.#hold(event.pointerId);\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tkey.addEventListener('lostpointercapture', releasePointer, { signal });\n\t\tkey.addEventListener('pointercancel', releasePointer, { signal });\n\t\tkey.addEventListener('pointerup', releasePointer, { signal });\n\t\tkey.addEventListener(\n\t\t\t'keydown',\n\t\t\t(event) => {\n\t\t\t\tif (event.repeat || !holdKeys.has(event.key) || !this.#isMomentary()) return;\n\n\t\t\t\tthis.#hold(event.key);\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tkey.addEventListener(\n\t\t\t'keyup',\n\t\t\t(event) => {\n\t\t\t\tif (event.key === this.#holder) this.#release();\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\t// Keyboard holds only; a finger on the next pad takes focus while this one is still held\n\t\tkey.addEventListener(\n\t\t\t'blur',\n\t\t\t() => {\n\t\t\t\tif (typeof this.#holder === 'string') this.#release();\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t}\n\n\t#hold(holder: number | string): void {\n\t\tif (this.disabled || this.#holder !== undefined) return;\n\n\t\tthis.#holder = holder;\n\t\tthis.pressed = true;\n\t\tthis.dispatchEvent(new Event('change', { bubbles: true }));\n\t}\n\n\t#isMomentary(): boolean {\n\t\treturn this.hasAttribute('momentary') && !this.hasAttribute('toggle');\n\t}\n\n\t#release(): void {\n\t\tif (this.#holder === undefined) return;\n\n\t\tthis.#holder = undefined;\n\t\tthis.pressed = false;\n\t\tthis.dispatchEvent(new Event('change', { bubbles: true }));\n\t}\n\n\t#render(): void {\n\t\tconst key = this.#key;\n\n\t\tkey.disabled = this.disabled;\n\t\tkey.removeAttribute('aria-pressed');\n\t\tif (this.hasAttribute('toggle')) key.setAttribute('aria-pressed', String(this.pressed));\n\t\tthis.forwardNaming(key, true);\n\t}\n}\n"],"mappings":"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"}

package/dist/elements/meter.d.ts

@@ -0,0 +1,17 @@
+import { SonicElement } from "./sonic-element.js";
+//#region src/elements/meter.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    'sonic-meter': SonicMeter;
+  }
+}
+export declare class SonicMeter extends SonicElement {
+  #private;
+  static readonly observedAttributes: string[];
+  get level(): number;
+  set level(amplitude: number);
+  attributeChangedCallback(): void;
+  protected connect(signal: AbortSignal): void;
+}
+//#endregion
+//# sourceMappingURL=meter.d.ts.map

package/dist/elements/meter.js

@@ -0,0 +1,119 @@
+import { SonicElement } from "./sonic-element.js";
+import { template } from "../lib/render.js";
+
+//#region src/elements/meter.ts
+const renderMeter = template(`
+		<div aria-hidden="true" class="sonic-meter">
+			<div class="sonic-meter-segments"></div>
+			<div class="sonic-meter-level"></div>
+			<div class="sonic-meter-clip"></div>
+		</div>
+	`, HTMLDivElement);
+const releaseDecibelsPerSecond = 20;
+const holdMs = 1500;
+function toDecibels(amplitude) {
+	return 20 * Math.log10(Math.abs(amplitude));
+}
+var SonicMeter = class extends SonicElement {
+	static observedAttributes = [
+		"disabled",
+		"max",
+		"min"
+	];
+	get level() {
+		return this.#level;
+	}
+	set level(amplitude) {
+		if (!Number.isFinite(amplitude)) return;
+		const decibels = toDecibels(amplitude);
+		const now = performance.now();
+		this.#level = amplitude;
+		this.#target = decibels;
+		this.#bar = Math.max(this.#bar, decibels);
+		if (decibels >= this.#peak) {
+			this.#peak = decibels;
+			this.#peakAt = now;
+		}
+		if (decibels >= 0) this.#clipAt = now;
+		this.#render(now);
+		this.#schedule(now);
+	}
+	#bar = -Infinity;
+	#clipAt = -Infinity;
+	#frame;
+	#lastFrame;
+	#level = 0;
+	#meter = renderMeter();
+	#peak = -Infinity;
+	#peakAt = -Infinity;
+	#target = -Infinity;
+	attributeChangedCallback() {
+		const now = performance.now();
+		this.#render(now);
+		this.#schedule(now);
+	}
+	connect(signal) {
+		const now = performance.now();
+		this.upgradeProperty("level");
+		this.appendOnce(this.#meter);
+		this.#render(now);
+		this.#schedule(now);
+		this.checkStyles(this.#meter, "meter.css");
+		signal.addEventListener("abort", () => {
+			if (this.#frame !== void 0) cancelAnimationFrame(this.#frame);
+			this.#frame = void 0;
+			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;
+	}
+	#isSettled(now) {
+		const floor = this.#min();
+		return this.#bar <= Math.max(this.#target, floor) && this.#peak <= Math.max(this.#bar, floor) && now - this.#clipAt >= holdMs;
+	}
+	#max() {
+		return this.numberAttribute("max", 0);
+	}
+	#min() {
+		return this.numberAttribute("min", -60);
+	}
+	#render(now) {
+		const meter = this.#meter;
+		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-peak", "0");
+			meter.style.setProperty("--_sonic-meter-clipped", "0");
+			return;
+		}
+		meter.style.setProperty("--_sonic-meter-level", String(this.#fraction(this.#bar)));
+		meter.style.setProperty("--_sonic-meter-peak", String(this.#fraction(this.#peak)));
+		meter.style.setProperty("--_sonic-meter-clipped", now - this.#clipAt < holdMs ? "1" : "0");
+	}
+	#schedule(now) {
+		if (this.#frame !== void 0 || !this.isConnected || this.#isSettled(now)) return;
+		if (this.#lastFrame === void 0) this.#lastFrame = now;
+		this.#frame = requestAnimationFrame(this.#tick);
+	}
+	#tick = (time) => {
+		const fall = releaseDecibelsPerSecond * Math.max(0, time - (this.#lastFrame ?? time)) / 1e3;
+		this.#frame = void 0;
+		this.#lastFrame = time;
+		this.#bar = Math.max(this.#target, this.#min(), this.#bar - fall);
+		if (time - this.#peakAt >= holdMs) this.#peak = Math.max(this.#bar, this.#peak - fall);
+		this.#render(time);
+		if (this.#isSettled(time)) {
+			this.#lastFrame = void 0;
+			return;
+		}
+		this.#frame = requestAnimationFrame(this.#tick);
+	};
+};
+
+//#endregion
+export { SonicMeter };
+//# sourceMappingURL=meter.js.map

package/dist/elements/meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.js","names":[],"sources":["../../src/elements/meter.ts"],"sourcesContent":["import { SonicElement } from '#elements/sonic-element.ts';\nimport { template } from '#lib/render.ts';\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sonic-meter': SonicMeter;\n\t}\n}\n\nconst renderMeter = template(\n\t/* HTML */ `\n\t\t<div aria-hidden=\"true\" class=\"sonic-meter\">\n\t\t\t<div class=\"sonic-meter-segments\"></div>\n\t\t\t<div class=\"sonic-meter-level\"></div>\n\t\t\t<div class=\"sonic-meter-clip\"></div>\n\t\t</div>\n\t`,\n\tHTMLDivElement,\n);\n\nconst releaseDecibelsPerSecond = 20;\nconst holdMs = 1500;\n\nfunction toDecibels(amplitude: number): number {\n\treturn 20 * Math.log10(Math.abs(amplitude));\n}\n\n// `level` is a linear amplitude; `min` and `max` are dBFS\nexport class SonicMeter extends SonicElement {\n\tstatic override readonly observedAttributes = ['disabled', 'max', 'min'];\n\n\tget level(): number {\n\t\treturn this.#level;\n\t}\n\n\tset level(amplitude: number) {\n\t\tif (!Number.isFinite(amplitude)) return;\n\n\t\tconst decibels = toDecibels(amplitude);\n\t\tconst now = performance.now();\n\n\t\tthis.#level = amplitude;\n\t\tthis.#target = decibels;\n\t\tthis.#bar = Math.max(this.#bar, decibels);\n\t\tif (decibels >= this.#peak) {\n\t\t\tthis.#peak = decibels;\n\t\t\tthis.#peakAt = now;\n\t\t}\n\t\tif (decibels >= 0) this.#clipAt = now;\n\t\tthis.#render(now);\n\t\tthis.#schedule(now);\n\t}\n\n\t#bar = -Infinity;\n\n\t#clipAt = -Infinity;\n\n\t#frame: number | undefined;\n\n\t#lastFrame: number | undefined;\n\n\t#level = 0;\n\n\treadonly #meter = renderMeter();\n\n\t#peak = -Infinity;\n\n\t#peakAt = -Infinity;\n\n\t#target = -Infinity;\n\n\tattributeChangedCallback(): void {\n\t\tconst now = performance.now();\n\n\t\tthis.#render(now);\n\t\tthis.#schedule(now);\n\t}\n\n\tprotected connect(signal: AbortSignal): void {\n\t\tconst now = performance.now();\n\n\t\tthis.upgradeProperty('level');\n\t\tthis.appendOnce(this.#meter);\n\t\tthis.#render(now);\n\t\tthis.#schedule(now);\n\t\tthis.checkStyles(this.#meter, 'meter.css');\n\t\tsignal.addEventListener(\n\t\t\t'abort',\n\t\t\t() => {\n\t\t\t\tif (this.#frame !== undefined) cancelAnimationFrame(this.#frame);\n\t\t\t\tthis.#frame = undefined;\n\t\t\t\tthis.#lastFrame = undefined;\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\t}\n\n\t#fraction(decibels: number): number {\n\t\tconst min = this.#min();\n\t\tconst range = this.#max() - min;\n\n\t\treturn range > 0 ? Math.min(1, Math.max(0, (decibels - min) / range)) : 0;\n\t}\n\n\t#isSettled(now: number): boolean {\n\t\tconst floor = this.#min();\n\n\t\treturn (\n\t\t\tthis.#bar <= Math.max(this.#target, floor) &&\n\t\t\tthis.#peak <= Math.max(this.#bar, floor) &&\n\t\t\tnow - this.#clipAt >= holdMs\n\t\t);\n\t}\n\n\t#max(): number {\n\t\treturn this.numberAttribute('max', 0);\n\t}\n\n\t#min(): number {\n\t\treturn this.numberAttribute('min', -60);\n\t}\n\n\t#render(now: number): void {\n\t\tconst meter = this.#meter;\n\n\t\t// The sheet places its colour zones on the scale\n\t\tmeter.style.setProperty('--_sonic-meter-min', String(this.#min()));\n\t\tmeter.style.setProperty('--_sonic-meter-max', String(this.#max()));\n\n\t\t// Disabled puts the light out, as on the other controls; the ballistics keep running so it lights up mid-fall\n\t\tif (this.disabled) {\n\t\t\tmeter.style.setProperty('--_sonic-meter-level', '0');\n\t\t\tmeter.style.setProperty('--_sonic-meter-peak', '0');\n\t\t\tmeter.style.setProperty('--_sonic-meter-clipped', '0');\n\t\t\treturn;\n\t\t}\n\n\t\tmeter.style.setProperty('--_sonic-meter-level', String(this.#fraction(this.#bar)));\n\t\tmeter.style.setProperty('--_sonic-meter-peak', String(this.#fraction(this.#peak)));\n\t\tmeter.style.setProperty('--_sonic-meter-clipped', now - this.#clipAt < holdMs ? '1' : '0');\n\t}\n\n\t#schedule(now: number): void {\n\t\tif (this.#frame !== undefined || !this.isConnected || this.#isSettled(now)) return;\n\n\t\tif (this.#lastFrame === undefined) this.#lastFrame = now;\n\t\tthis.#frame = requestAnimationFrame(this.#tick);\n\t}\n\n\t// Timed by the frame rather than counted, so a 120Hz display falls at the same speed\n\treadonly #tick = (time: number): void => {\n\t\tconst fall = (releaseDecibelsPerSecond * Math.max(0, time - (this.#lastFrame ?? time))) / 1000;\n\n\t\tthis.#frame = undefined;\n\t\tthis.#lastFrame = time;\n\t\tthis.#bar = Math.max(this.#target, this.#min(), this.#bar - fall);\n\t\tif (time - this.#peakAt >= holdMs) this.#peak = Math.max(this.#bar, this.#peak - fall);\n\t\tthis.#render(time);\n\t\tif (this.#isSettled(time)) {\n\t\t\tthis.#lastFrame = undefined;\n\t\t\treturn;\n\t\t}\n\n\t\tthis.#frame = requestAnimationFrame(this.#tick);\n\t};\n}\n"],"mappings":"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"}

package/dist/elements/range-element.d.ts

@@ -0,0 +1,32 @@
+import { SonicElement } from "./sonic-element.js";
+//#region src/elements/range-element.d.ts
+export interface RangeAxis {
+  position: (event: PointerEvent) => number;
+  travelPx: number;
+}
+export declare abstract class SonicRangeElement extends SonicElement {
+  #private;
+  static readonly observedAttributes: string[];
+  get formatValue(): ((value: number) => string) | undefined;
+  set formatValue(format: ((value: number) => string) | undefined);
+  get parseValue(): ((text: string) => number) | undefined;
+  set parseValue(parse: ((text: string) => number) | undefined);
+  get value(): number;
+  set value(next: number);
+  attributeChangedCallback(name: string): void;
+  connectedCallback(): void;
+  protected bindGestures(control: HTMLElement, signal: AbortSignal, grab: (event: PointerEvent) => RangeAxis | undefined): void;
+  protected clampRange(next: number): number;
+  protected fraction(value: number): number;
+  protected input(next: number): boolean;
+  protected max(): number;
+  protected min(): number;
+  protected originFraction(): number;
+  protected positions(): number | undefined;
+  protected range(): number;
+  protected abstract render(): void;
+  protected renderAria(control: HTMLElement, orientation?: 'horizontal' | 'vertical'): void;
+  protected valueAt(fraction: number): number;
+}
+//#endregion
+//# sourceMappingURL=range-element.d.ts.map