@xsynaptic/sonic-ui 0.1.0

package/dist/elements/slider.js

@@ -0,0 +1,70 @@
+import { requireChild, template } from "../lib/render.js";
+import { SonicRangeElement } from "./range-element.js";
+
+//#region src/elements/slider.ts
+const renderSlider = template(`
+		<div class="sonic-slider" role="slider" tabindex="0">
+			<div class="sonic-slider-marks"></div>
+			<div class="sonic-slider-groove"></div>
+			<div class="sonic-slider-cap"></div>
+			<div class="sonic-slider-readout" popover="manual">
+				<span></span>
+				<input
+					autocomplete="off"
+					class="sonic-slider-entry"
+					enterkeyhint="done"
+					hidden
+					spellcheck="false"
+					type="text"
+				/>
+			</div>
+		</div>
+	`, HTMLDivElement);
+var SonicSlider = class extends SonicRangeElement {
+	static observedAttributes = [...SonicRangeElement.observedAttributes, "orientation"];
+	#slider = renderSlider();
+	connect(signal) {
+		const slider = this.#slider;
+		const cap = requireChild(slider, ".sonic-slider-cap", HTMLDivElement);
+		this.appendOnce(slider);
+		this.render();
+		this.checkStyles(slider, "slider.css");
+		this.bindGestures(slider, signal, (event) => {
+			const axis = this.#axis(slider, cap);
+			if (event.target instanceof Node && cap.contains(event.target)) return axis;
+			if (this.getAttribute("groove-press") === "none") return;
+			this.input(this.valueAt((axis.position(event) - axis.startPx) / axis.travelPx));
+			return axis;
+		});
+	}
+	render() {
+		const slider = this.#slider;
+		const positions = this.positions();
+		slider.style.setProperty("--_sonic-slider-value", String(this.fraction(this.value)));
+		slider.style.setProperty("--_sonic-slider-origin", String(this.originFraction()));
+		if (positions === void 0) slider.style.removeProperty("--_sonic-slider-positions");
+		else slider.style.setProperty("--_sonic-slider-positions", String(positions));
+		this.renderAria(slider, this.#isVertical() ? "vertical" : "horizontal");
+	}
+	#axis(slider, cap) {
+		const track = slider.getBoundingClientRect();
+		const capBox = cap.getBoundingClientRect();
+		if (this.#isVertical()) return {
+			position: (event) => -event.clientY,
+			startPx: capBox.height / 2 - track.bottom,
+			travelPx: Math.max(1, track.height - capBox.height)
+		};
+		return {
+			position: (event) => event.clientX,
+			startPx: track.left + capBox.width / 2,
+			travelPx: Math.max(1, track.width - capBox.width)
+		};
+	}
+	#isVertical() {
+		return this.getAttribute("orientation") === "vertical";
+	}
+};
+
+//#endregion
+export { SonicSlider };
+//# sourceMappingURL=slider.js.map

package/dist/elements/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","names":[],"sources":["../../src/elements/slider.ts"],"sourcesContent":["import type { RangeAxis } from '#elements/range-element.ts';\n\nimport { SonicRangeElement } from '#elements/range-element.ts';\nimport { requireChild, template } from '#lib/render.ts';\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sonic-slider': SonicSlider;\n\t}\n}\n\ninterface SliderAxis extends RangeAxis {\n\t// The cap's centre at the minimum, on the same scale as `position`\n\tstartPx: number;\n}\n\nconst renderSlider = template(\n\t/* HTML */ `\n\t\t<div class=\"sonic-slider\" role=\"slider\" tabindex=\"0\">\n\t\t\t<div class=\"sonic-slider-marks\"></div>\n\t\t\t<div class=\"sonic-slider-groove\"></div>\n\t\t\t<div class=\"sonic-slider-cap\"></div>\n\t\t\t<div class=\"sonic-slider-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-slider-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\nexport class SonicSlider extends SonicRangeElement {\n\tstatic override readonly observedAttributes = [\n\t\t...SonicRangeElement.observedAttributes,\n\t\t'orientation',\n\t];\n\n\treadonly #slider = renderSlider();\n\n\tprotected connect(signal: AbortSignal): void {\n\t\tconst slider = this.#slider;\n\t\tconst cap = requireChild(slider, '.sonic-slider-cap', HTMLDivElement);\n\n\t\tthis.appendOnce(slider);\n\t\tthis.render();\n\t\tthis.checkStyles(slider, 'slider.css');\n\t\tthis.bindGestures(slider, signal, (event) => {\n\t\t\tconst axis = this.#axis(slider, cap);\n\t\t\tif (event.target instanceof Node && cap.contains(event.target)) return axis;\n\n\t\t\tif (this.getAttribute('groove-press') === 'none') return;\n\n\t\t\tthis.input(this.valueAt((axis.position(event) - axis.startPx) / axis.travelPx));\n\n\t\t\treturn axis;\n\t\t});\n\t}\n\n\tprotected render(): void {\n\t\tconst slider = this.#slider;\n\t\tconst positions = this.positions();\n\n\t\tslider.style.setProperty('--_sonic-slider-value', String(this.fraction(this.value)));\n\t\tslider.style.setProperty('--_sonic-slider-origin', String(this.originFraction()));\n\t\tif (positions === undefined) slider.style.removeProperty('--_sonic-slider-positions');\n\t\telse slider.style.setProperty('--_sonic-slider-positions', String(positions));\n\t\tthis.renderAria(slider, this.#isVertical() ? 'vertical' : 'horizontal');\n\t}\n\n\t#axis(slider: HTMLElement, cap: HTMLElement): SliderAxis {\n\t\tconst track = slider.getBoundingClientRect();\n\t\tconst capBox = cap.getBoundingClientRect();\n\n\t\tif (this.#isVertical()) {\n\t\t\treturn {\n\t\t\t\tposition: (event) => -event.clientY,\n\t\t\t\tstartPx: capBox.height / 2 - track.bottom,\n\t\t\t\ttravelPx: Math.max(1, track.height - capBox.height),\n\t\t\t};\n\t\t}\n\n\t\treturn {\n\t\t\tposition: (event) => event.clientX,\n\t\t\tstartPx: track.left + capBox.width / 2,\n\t\t\ttravelPx: Math.max(1, track.width - capBox.width),\n\t\t};\n\t}\n\n\t#isVertical(): boolean {\n\t\treturn this.getAttribute('orientation') === 'vertical';\n\t}\n}\n"],"mappings":";;;;AAgBA,MAAM,eAAe,SACT;;;;;;;;;;;;;;;;;IAkBX,cACD;AAEA,IAAa,cAAb,cAAiC,kBAAkB;CAClD,OAAyB,qBAAqB,CAC7C,GAAG,kBAAkB,oBACrB,aACD;CAEA,AAAS,UAAU,aAAa;CAEhC,AAAU,QAAQ,QAA2B;EAC5C,MAAM,SAAS,KAAK;EACpB,MAAM,MAAM,aAAa,QAAQ,qBAAqB,cAAc;EAEpE,KAAK,WAAW,MAAM;EACtB,KAAK,OAAO;EACZ,KAAK,YAAY,QAAQ,YAAY;EACrC,KAAK,aAAa,QAAQ,SAAS,UAAU;GAC5C,MAAM,OAAO,KAAK,MAAM,QAAQ,GAAG;GACnC,IAAI,MAAM,kBAAkB,QAAQ,IAAI,SAAS,MAAM,MAAM,GAAG,OAAO;GAEvE,IAAI,KAAK,aAAa,cAAc,MAAM,QAAQ;GAElD,KAAK,MAAM,KAAK,SAAS,KAAK,SAAS,KAAK,IAAI,KAAK,WAAW,KAAK,QAAQ,CAAC;GAE9E,OAAO;EACR,CAAC;CACF;CAEA,AAAU,SAAe;EACxB,MAAM,SAAS,KAAK;EACpB,MAAM,YAAY,KAAK,UAAU;EAEjC,OAAO,MAAM,YAAY,yBAAyB,OAAO,KAAK,SAAS,KAAK,KAAK,CAAC,CAAC;EACnF,OAAO,MAAM,YAAY,0BAA0B,OAAO,KAAK,eAAe,CAAC,CAAC;EAChF,IAAI,cAAc,QAAW,OAAO,MAAM,eAAe,2BAA2B;OAC/E,OAAO,MAAM,YAAY,6BAA6B,OAAO,SAAS,CAAC;EAC5E,KAAK,WAAW,QAAQ,KAAK,YAAY,IAAI,aAAa,YAAY;CACvE;CAEA,MAAM,QAAqB,KAA8B;EACxD,MAAM,QAAQ,OAAO,sBAAsB;EAC3C,MAAM,SAAS,IAAI,sBAAsB;EAEzC,IAAI,KAAK,YAAY,GACpB,OAAO;GACN,WAAW,UAAU,CAAC,MAAM;GAC5B,SAAS,OAAO,SAAS,IAAI,MAAM;GACnC,UAAU,KAAK,IAAI,GAAG,MAAM,SAAS,OAAO,MAAM;EACnD;EAGD,OAAO;GACN,WAAW,UAAU,MAAM;GAC3B,SAAS,MAAM,OAAO,OAAO,QAAQ;GACrC,UAAU,KAAK,IAAI,GAAG,MAAM,QAAQ,OAAO,KAAK;EACjD;CACD;CAEA,cAAuB;EACtB,OAAO,KAAK,aAAa,aAAa,MAAM;CAC7C;AACD"}

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

@@ -0,0 +1,20 @@
+//#region src/elements/sonic-element.d.ts
+export declare abstract class SonicElement extends HTMLElement {
+  #private;
+  static readonly observedAttributes: string[];
+  get disabled(): boolean;
+  set disabled(isDisabled: boolean);
+  connectedCallback(): void;
+  connectedMoveCallback(): void;
+  disconnectedCallback(): void;
+  protected adoptChildren(adopt: () => void, signal: AbortSignal): void;
+  protected appendOnce(child: Element): void;
+  protected checkStyles(control: HTMLElement, sheet: string): void;
+  protected abstract connect(signal: AbortSignal): void;
+  protected forwardNaming(target: Element, isNamed: boolean): void;
+  protected numberAttribute(name: string, fallback: number): number;
+  protected toggleState(state: string, isOn: boolean): void;
+  protected upgradeProperty(name: keyof this): void;
+}
+//#endregion
+//# sourceMappingURL=sonic-element.d.ts.map

package/dist/elements/sonic-element.js

@@ -0,0 +1,94 @@
+import { writeAttribute } from "../lib/write-attribute.js";
+
+//#region src/elements/sonic-element.ts
+const namingAttributes = [
+	"aria-describedby",
+	"aria-label",
+	"aria-labelledby"
+];
+const checkedClasses = /* @__PURE__ */ new WeakSet();
+var SonicElement = class extends HTMLElement {
+	static observedAttributes = [...namingAttributes, "disabled"];
+	get disabled() {
+		return this.hasAttribute("disabled");
+	}
+	set disabled(isDisabled) {
+		this.toggleAttribute("disabled", isDisabled);
+	}
+	#connection;
+	#internals = "attachInternals" in HTMLElement.prototype ? this.attachInternals() : void 0;
+	connectedCallback() {
+		this.upgradeProperty("disabled");
+		if (this.#connection) return;
+		const connection = new AbortController();
+		try {
+			this.connect(connection.signal);
+		} catch (error) {
+			connection.abort();
+			throw error;
+		}
+		this.#connection = connection;
+	}
+	connectedMoveCallback() {}
+	disconnectedCallback() {
+		const connection = this.#connection;
+		if (!connection) return;
+		queueMicrotask(() => {
+			if (this.isConnected || this.#connection !== connection) return;
+			connection.abort();
+			this.#connection = void 0;
+		});
+	}
+	adoptChildren(adopt, signal) {
+		const observer = new MutationObserver(adopt);
+		adopt();
+		observer.observe(this, { childList: true });
+		signal.addEventListener("abort", () => {
+			observer.disconnect();
+		}, { once: true });
+	}
+	appendOnce(child) {
+		if (child.parentNode !== this) this.append(child);
+	}
+	checkStyles(control, sheet) {
+		const elementClass = this.constructor;
+		if (checkedClasses.has(elementClass)) return;
+		checkedClasses.add(elementClass);
+		requestAnimationFrame(() => {
+			if (!control.isConnected) {
+				checkedClasses.delete(elementClass);
+				return;
+			}
+			const styles = getComputedStyle(control);
+			const missing = [styles.getPropertyValue("--_sonic-unlit") === "" ? "material.css" : "", styles.getPropertyValue("--_sonic-unit") === "" ? sheet : ""].filter(Boolean);
+			if (missing.length === 0) return;
+			console.warn(`<${this.localName}> draws blank without ${missing.map((file) => `@xsynaptic/sonic-ui/${file}`).join(" and ")} (or controls.css)`);
+		});
+	}
+	forwardNaming(target, isNamed) {
+		for (const name of namingAttributes) {
+			const value = this.getAttribute(name);
+			writeAttribute(target, name, isNamed && value !== null ? value : void 0);
+		}
+	}
+	numberAttribute(name, fallback) {
+		const attribute = this.getAttribute(name);
+		if (attribute === null) return fallback;
+		const parsed = Number(attribute);
+		return Number.isFinite(parsed) ? parsed : fallback;
+	}
+	toggleState(state, isOn) {
+		if (isOn) this.#internals?.states.add(state);
+		else this.#internals?.states.delete(state);
+	}
+	upgradeProperty(name) {
+		if (!Object.hasOwn(this, name)) return;
+		const value = this[name];
+		Reflect.deleteProperty(this, name);
+		this[name] = value;
+	}
+};
+
+//#endregion
+export { SonicElement };
+//# sourceMappingURL=sonic-element.js.map

package/dist/elements/sonic-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sonic-element.js","names":[],"sources":["../../src/elements/sonic-element.ts"],"sourcesContent":["import { writeAttribute } from '#lib/write-attribute.ts';\n\n// Forwarding another attribute is a public API decision\nconst namingAttributes = ['aria-describedby', 'aria-label', 'aria-labelledby'];\n\nconst checkedClasses = new WeakSet<object>();\n\n// eslint-disable-next-line wc/define-tag-after-class-definition -- abstract, so only its subclasses are ever defined\nexport abstract class SonicElement extends HTMLElement {\n\tstatic readonly observedAttributes = [...namingAttributes, 'disabled'];\n\n\tget disabled(): boolean {\n\t\treturn this.hasAttribute('disabled');\n\t}\n\n\tset disabled(isDisabled: boolean) {\n\t\tthis.toggleAttribute('disabled', isDisabled);\n\t}\n\n\t#connection: AbortController | undefined;\n\n\t// happy-dom has no `ElementInternals`\n\treadonly #internals =\n\t\t'attachInternals' in HTMLElement.prototype ? this.attachInternals() : undefined;\n\n\tconnectedCallback(): void {\n\t\tthis.upgradeProperty('disabled');\n\t\tif (this.#connection) return;\n\n\t\tconst connection = new AbortController();\n\n\t\t// A throw leaves nothing bound behind it\n\t\ttry {\n\t\t\tthis.connect(connection.signal);\n\t\t} catch (error) {\n\t\t\tconnection.abort();\n\t\t\tthrow error;\n\t\t}\n\n\t\tthis.#connection = connection;\n\t}\n\n\tconnectedMoveCallback(): void {\n\t\t// Defined so `moveBefore` from a persisting router keeps every binding\n\t}\n\n\t// Without `moveBefore` (Safari), a persisting router disconnects and reconnects in one task\n\tdisconnectedCallback(): void {\n\t\tconst connection = this.#connection;\n\t\tif (!connection) return;\n\n\t\tqueueMicrotask(() => {\n\t\t\tif (this.isConnected || this.#connection !== connection) return;\n\n\t\t\tconnection.abort();\n\t\t\tthis.#connection = undefined;\n\t\t});\n\t}\n\n\t// Replacing the host's children takes the control with them, so `adopt` runs on every change\n\tprotected adoptChildren(adopt: () => void, signal: AbortSignal): void {\n\t\tconst observer = new MutationObserver(adopt);\n\n\t\tadopt();\n\t\tobserver.observe(this, { childList: true });\n\t\tsignal.addEventListener(\n\t\t\t'abort',\n\t\t\t() => {\n\t\t\t\tobserver.disconnect();\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\t}\n\n\tprotected appendOnce(child: Element): void {\n\t\tif (child.parentNode !== this) this.append(child);\n\t}\n\n\t// A missing sheet draws the control blank without an error\n\tprotected checkStyles(control: HTMLElement, sheet: string): void {\n\t\tconst elementClass = this.constructor;\n\t\tif (checkedClasses.has(elementClass)) return;\n\n\t\tcheckedClasses.add(elementClass);\n\t\trequestAnimationFrame(() => {\n\t\t\t// A detached control computes no styles\n\t\t\tif (!control.isConnected) {\n\t\t\t\tcheckedClasses.delete(elementClass);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst styles = getComputedStyle(control);\n\t\t\tconst missing = [\n\t\t\t\tstyles.getPropertyValue('--_sonic-unlit') === '' ? 'material.css' : '',\n\t\t\t\tstyles.getPropertyValue('--_sonic-unit') === '' ? sheet : '',\n\t\t\t].filter(Boolean);\n\t\t\tif (missing.length === 0) return;\n\n\t\t\tconsole.warn(\n\t\t\t\t`<${this.localName}> draws blank without ${missing.map((file) => `@xsynaptic/sonic-ui/${file}`).join(' and ')} (or controls.css)`,\n\t\t\t);\n\t\t});\n\t}\n\n\tprotected abstract connect(signal: AbortSignal): void;\n\n\tprotected forwardNaming(target: Element, isNamed: boolean): void {\n\t\tfor (const name of namingAttributes) {\n\t\t\tconst value = this.getAttribute(name);\n\n\t\t\twriteAttribute(target, name, isNamed && value !== null ? value : undefined);\n\t\t}\n\t}\n\n\tprotected numberAttribute(name: string, fallback: number): number {\n\t\tconst attribute = this.getAttribute(name);\n\t\tif (attribute === null) return fallback;\n\n\t\tconst parsed = Number(attribute);\n\n\t\treturn Number.isFinite(parsed) ? parsed : fallback;\n\t}\n\n\tprotected toggleState(state: string, isOn: boolean): void {\n\t\tif (isOn) this.#internals?.states.add(state);\n\t\telse this.#internals?.states.delete(state);\n\t}\n\n\t// A property set before upgrade shadows its accessor\n\tprotected upgradeProperty(name: keyof this): void {\n\t\tif (!Object.hasOwn(this, name)) return;\n\n\t\tconst value = this[name];\n\n\t\tReflect.deleteProperty(this, name);\n\t\tthis[name] = value;\n\t}\n}\n"],"mappings":";;;AAGA,MAAM,mBAAmB;CAAC;CAAoB;CAAc;AAAiB;AAE7E,MAAM,iCAAiB,IAAI,QAAgB;AAG3C,IAAsB,eAAtB,cAA2C,YAAY;CACtD,OAAgB,qBAAqB,CAAC,GAAG,kBAAkB,UAAU;CAErE,IAAI,WAAoB;EACvB,OAAO,KAAK,aAAa,UAAU;CACpC;CAEA,IAAI,SAAS,YAAqB;EACjC,KAAK,gBAAgB,YAAY,UAAU;CAC5C;CAEA;CAGA,AAAS,aACR,qBAAqB,YAAY,YAAY,KAAK,gBAAgB,IAAI;CAEvE,oBAA0B;EACzB,KAAK,gBAAgB,UAAU;EAC/B,IAAI,KAAK,aAAa;EAEtB,MAAM,aAAa,IAAI,gBAAgB;EAGvC,IAAI;GACH,KAAK,QAAQ,WAAW,MAAM;EAC/B,SAAS,OAAO;GACf,WAAW,MAAM;GACjB,MAAM;EACP;EAEA,KAAK,cAAc;CACpB;CAEA,wBAA8B,CAE9B;CAGA,uBAA6B;EAC5B,MAAM,aAAa,KAAK;EACxB,IAAI,CAAC,YAAY;EAEjB,qBAAqB;GACpB,IAAI,KAAK,eAAe,KAAK,gBAAgB,YAAY;GAEzD,WAAW,MAAM;GACjB,KAAK,cAAc;EACpB,CAAC;CACF;CAGA,AAAU,cAAc,OAAmB,QAA2B;EACrE,MAAM,WAAW,IAAI,iBAAiB,KAAK;EAE3C,MAAM;EACN,SAAS,QAAQ,MAAM,EAAE,WAAW,KAAK,CAAC;EAC1C,OAAO,iBACN,eACM;GACL,SAAS,WAAW;EACrB,GACA,EAAE,MAAM,KAAK,CACd;CACD;CAEA,AAAU,WAAW,OAAsB;EAC1C,IAAI,MAAM,eAAe,MAAM,KAAK,OAAO,KAAK;CACjD;CAGA,AAAU,YAAY,SAAsB,OAAqB;EAChE,MAAM,eAAe,KAAK;EAC1B,IAAI,eAAe,IAAI,YAAY,GAAG;EAEtC,eAAe,IAAI,YAAY;EAC/B,4BAA4B;GAE3B,IAAI,CAAC,QAAQ,aAAa;IACzB,eAAe,OAAO,YAAY;IAClC;GACD;GAEA,MAAM,SAAS,iBAAiB,OAAO;GACvC,MAAM,UAAU,CACf,OAAO,iBAAiB,gBAAgB,MAAM,KAAK,iBAAiB,IACpE,OAAO,iBAAiB,eAAe,MAAM,KAAK,QAAQ,EAC3D,CAAC,CAAC,OAAO,OAAO;GAChB,IAAI,QAAQ,WAAW,GAAG;GAE1B,QAAQ,KACP,IAAI,KAAK,UAAU,wBAAwB,QAAQ,KAAK,SAAS,uBAAuB,MAAM,CAAC,CAAC,KAAK,OAAO,EAAE,mBAC/G;EACD,CAAC;CACF;CAIA,AAAU,cAAc,QAAiB,SAAwB;EAChE,KAAK,MAAM,QAAQ,kBAAkB;GACpC,MAAM,QAAQ,KAAK,aAAa,IAAI;GAEpC,eAAe,QAAQ,MAAM,WAAW,UAAU,OAAO,QAAQ,MAAS;EAC3E;CACD;CAEA,AAAU,gBAAgB,MAAc,UAA0B;EACjE,MAAM,YAAY,KAAK,aAAa,IAAI;EACxC,IAAI,cAAc,MAAM,OAAO;EAE/B,MAAM,SAAS,OAAO,SAAS;EAE/B,OAAO,OAAO,SAAS,MAAM,IAAI,SAAS;CAC3C;CAEA,AAAU,YAAY,OAAe,MAAqB;EACzD,IAAI,MAAM,KAAK,YAAY,OAAO,IAAI,KAAK;OACtC,KAAK,YAAY,OAAO,OAAO,KAAK;CAC1C;CAGA,AAAU,gBAAgB,MAAwB;EACjD,IAAI,CAAC,OAAO,OAAO,MAAM,IAAI,GAAG;EAEhC,MAAM,QAAQ,KAAK;EAEnB,QAAQ,eAAe,MAAM,IAAI;EACjC,KAAK,QAAQ;CACd;AACD"}

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/lib/read-px-property.js

@@ -0,0 +1,9 @@
+//#region src/lib/read-px-property.ts
+function readPxProperty(styles, property, fallback) {
+	const parsed = Number.parseFloat(styles.getPropertyValue(property));
+	return Number.isFinite(parsed) ? parsed : fallback;
+}
+
+//#endregion
+export { readPxProperty };
+//# sourceMappingURL=read-px-property.js.map

package/dist/lib/read-px-property.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"read-px-property.js","names":[],"sources":["../../src/lib/read-px-property.ts"],"sourcesContent":["// Only px; another unit needs a probe element to convert\nexport function readPxProperty(\n\tstyles: CSSStyleDeclaration,\n\tproperty: string,\n\tfallback: number,\n): number {\n\t// eslint-disable-next-line unicorn/prefer-number-coercion -- parsing has to stop at the unit\n\tconst parsed = Number.parseFloat(styles.getPropertyValue(property));\n\n\treturn Number.isFinite(parsed) ? parsed : fallback;\n}\n"],"mappings":";AACA,SAAgB,eACf,QACA,UACA,UACS;CAET,MAAM,SAAS,OAAO,WAAW,OAAO,iBAAiB,QAAQ,CAAC;CAElE,OAAO,OAAO,SAAS,MAAM,IAAI,SAAS;AAC3C"}

package/dist/lib/render.js

@@ -0,0 +1,19 @@
+//#region src/lib/render.ts
+function requireChild(root, selector, child) {
+	const found = root.querySelector(selector);
+	if (!(found instanceof child)) throw new Error(`A template is missing its ${selector}`);
+	return found;
+}
+function template(html, root) {
+	const parsed = document.createElement("template");
+	parsed.innerHTML = html;
+	return () => {
+		const clone = document.importNode(parsed.content, true).firstElementChild;
+		if (!(clone instanceof root)) throw new Error(`A template's root is not a ${root.name}`);
+		return clone;
+	};
+}
+
+//#endregion
+export { requireChild, template };
+//# sourceMappingURL=render.js.map

package/dist/lib/render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.js","names":[],"sources":["../../src/lib/render.ts"],"sourcesContent":["export function requireChild<Child extends Element>(\n\troot: Element,\n\tselector: string,\n\tchild: new () => Child,\n): Child {\n\tconst found = root.querySelector(selector);\n\tif (!(found instanceof child)) throw new Error(`A template is missing its ${selector}`);\n\n\treturn found;\n}\n\nexport function template<Root extends Element>(html: string, root: new () => Root): () => Root {\n\tconst parsed = document.createElement('template');\n\n\tparsed.innerHTML = html;\n\n\treturn () => {\n\t\tconst clone = document.importNode(parsed.content, true).firstElementChild;\n\t\tif (!(clone instanceof root)) throw new Error(`A template's root is not a ${root.name}`);\n\n\t\treturn clone;\n\t};\n}\n"],"mappings":";AAAA,SAAgB,aACf,MACA,UACA,OACQ;CACR,MAAM,QAAQ,KAAK,cAAc,QAAQ;CACzC,IAAI,EAAE,iBAAiB,QAAQ,MAAM,IAAI,MAAM,6BAA6B,UAAU;CAEtF,OAAO;AACR;AAEA,SAAgB,SAA+B,MAAc,MAAkC;CAC9F,MAAM,SAAS,SAAS,cAAc,UAAU;CAEhD,OAAO,YAAY;CAEnB,aAAa;EACZ,MAAM,QAAQ,SAAS,WAAW,OAAO,SAAS,IAAI,CAAC,CAAC;EACxD,IAAI,EAAE,iBAAiB,OAAO,MAAM,IAAI,MAAM,8BAA8B,KAAK,MAAM;EAEvF,OAAO;CACR;AACD"}

package/dist/lib/taper.js

@@ -0,0 +1,33 @@
+//#region src/lib/taper.ts
+function clampUnit(fraction) {
+	return Math.min(1, Math.max(0, fraction));
+}
+function linearTaper(min, max) {
+	const range = max - min;
+	return {
+		position: (value) => range > 0 ? clampUnit((value - min) / range) : 0,
+		value: (position) => min + clampUnit(position) * range
+	};
+}
+function logTaper(min, max) {
+	if (min <= 0 || max <= min) return void 0;
+	const span = Math.log(max / min);
+	return {
+		position: (value) => clampUnit(Math.log(Math.max(min, value) / min) / span),
+		value: (position) => min * Math.exp(clampUnit(position) * span)
+	};
+}
+function skewTaper(min, max, midpoint) {
+	const range = max - min;
+	const proportion = (midpoint - min) / range;
+	if (proportion === .5 || !(proportion > 0 && proportion < 1)) return void 0;
+	const skew = Math.log(.5) / Math.log(proportion);
+	return {
+		position: (value) => clampUnit((value - min) / range) ** skew,
+		value: (position) => min + range * clampUnit(position) ** (1 / skew)
+	};
+}
+
+//#endregion
+export { clampUnit, linearTaper, logTaper, skewTaper };
+//# sourceMappingURL=taper.js.map

package/dist/lib/taper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"taper.js","names":[],"sources":["../../src/lib/taper.ts"],"sourcesContent":["// Positions run 0 to 1 along the travel\nexport interface Taper {\n\tposition: (value: number) => number;\n\tvalue: (position: number) => number;\n}\n\nexport function clampUnit(fraction: number): number {\n\treturn Math.min(1, Math.max(0, fraction));\n}\n\nexport function linearTaper(min: number, max: number): Taper {\n\tconst range = max - min;\n\n\treturn {\n\t\tposition: (value) => (range > 0 ? clampUnit((value - min) / range) : 0),\n\t\tvalue: (position) => min + clampUnit(position) * range,\n\t};\n}\n\nexport function logTaper(min: number, max: number): Taper | undefined {\n\tif (min <= 0 || max <= min) return undefined;\n\n\tconst span = Math.log(max / min);\n\n\treturn {\n\t\tposition: (value) => clampUnit(Math.log(Math.max(min, value) / min) / span),\n\t\tvalue: (position) => min * Math.exp(clampUnit(position) * span),\n\t};\n}\n\n// JUCE's skew: a power curve through `midpoint` at half the travel\nexport function skewTaper(min: number, max: number, midpoint: number): Taper | undefined {\n\tconst range = max - min;\n\tconst proportion = (midpoint - min) / range;\n\n\tif (proportion === 0.5 || !(proportion > 0 && proportion < 1)) return undefined;\n\n\tconst skew = Math.log(0.5) / Math.log(proportion);\n\n\treturn {\n\t\tposition: (value) => clampUnit((value - min) / range) ** skew,\n\t\tvalue: (position) => min + range * clampUnit(position) ** (1 / skew),\n\t};\n}\n"],"mappings":";AAMA,SAAgB,UAAU,UAA0B;CACnD,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,QAAQ,CAAC;AACzC;AAEA,SAAgB,YAAY,KAAa,KAAoB;CAC5D,MAAM,QAAQ,MAAM;CAEpB,OAAO;EACN,WAAW,UAAW,QAAQ,IAAI,WAAW,QAAQ,OAAO,KAAK,IAAI;EACrE,QAAQ,aAAa,MAAM,UAAU,QAAQ,IAAI;CAClD;AACD;AAEA,SAAgB,SAAS,KAAa,KAAgC;CACrE,IAAI,OAAO,KAAK,OAAO,KAAK,OAAO;CAEnC,MAAM,OAAO,KAAK,IAAI,MAAM,GAAG;CAE/B,OAAO;EACN,WAAW,UAAU,UAAU,KAAK,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,IAAI,IAAI;EAC1E,QAAQ,aAAa,MAAM,KAAK,IAAI,UAAU,QAAQ,IAAI,IAAI;CAC/D;AACD;AAGA,SAAgB,UAAU,KAAa,KAAa,UAAqC;CACxF,MAAM,QAAQ,MAAM;CACpB,MAAM,cAAc,WAAW,OAAO;CAEtC,IAAI,eAAe,MAAO,EAAE,aAAa,KAAK,aAAa,IAAI,OAAO;CAEtE,MAAM,OAAO,KAAK,IAAI,EAAG,IAAI,KAAK,IAAI,UAAU;CAEhD,OAAO;EACN,WAAW,UAAU,WAAW,QAAQ,OAAO,KAAK,KAAK;EACzD,QAAQ,aAAa,MAAM,QAAQ,UAAU,QAAQ,MAAM,IAAI;CAChE;AACD"}

package/dist/lib/write-attribute.js

@@ -0,0 +1,12 @@
+//#region src/lib/write-attribute.ts
+function writeAttribute(element, name, value) {
+	if (value === void 0) {
+		element.removeAttribute(name);
+		return;
+	}
+	element.setAttribute(name, value);
+}
+
+//#endregion
+export { writeAttribute };
+//# sourceMappingURL=write-attribute.js.map

package/dist/lib/write-attribute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"write-attribute.js","names":[],"sources":["../../src/lib/write-attribute.ts"],"sourcesContent":["export function writeAttribute(element: Element, name: string, value: string | undefined): void {\n\tif (value === undefined) {\n\t\telement.removeAttribute(name);\n\t\treturn;\n\t}\n\n\telement.setAttribute(name, value);\n}\n"],"mappings":";AAAA,SAAgB,eAAe,SAAkB,MAAc,OAAiC;CAC/F,IAAI,UAAU,QAAW;EACxB,QAAQ,gBAAgB,IAAI;EAC5B;CACD;CAEA,QAAQ,aAAa,MAAM,KAAK;AACjC"}

package/dist/skins/ivory.css

@@ -0,0 +1,8 @@
+/* Ink derived from a pale cap would vanish against it */
+@layer sonic {
+	.sonic-skin-ivory {
+		--sonic-cap: oklch(85.5% 0.0281 215deg);
+		--sonic-cap-hover: oklch(90.5% 0.024 215deg);
+		--sonic-mark: oklch(18.5% 0.0099 237deg);
+	}
+}

package/dist/skins/lime.css

@@ -0,0 +1,10 @@
+@layer sonic {
+	.sonic-skin-lime {
+		--sonic-lit: oklch(83.8% 0.205 118deg);
+		--sonic-unlit: oklch(28.6% 0.0203 237deg);
+		--sonic-cap: oklch(32.4% 0.0229 237deg);
+		--sonic-cap-hover: oklch(37.2% 0.025 237deg);
+		--sonic-dial-ring-ratio: 0.05;
+		--sonic-dial-gap-ratio: 0.1;
+	}
+}

package/dist/skins/slate.css

@@ -0,0 +1,10 @@
+@layer sonic {
+	.sonic-skin-slate {
+		--sonic-lit: #22d3ee;
+		--sonic-unlit: #1e293b;
+		--sonic-cap: #334155;
+		--sonic-cap-hover: #475569;
+		--sonic-dial-ring-ratio: 0.12;
+		--sonic-dial-gap-ratio: 0.07;
+	}
+}

package/dist/styles/controls.css

@@ -0,0 +1,8 @@
+/* The material first; every control's sheet reads it */
+@import './material.css';
+@import './dial.css';
+@import './key.css';
+@import './meter.css';
+@import './screen.css';
+@import './segmented.css';
+@import './slider.css';

package/dist/styles/dial.css

@@ -0,0 +1,265 @@
+@layer sonic {
+	/* On the host too, for the placeholder */
+	:is(sonic-dial, .sonic-dial) {
+		--_sonic-dial-size: var(--sonic-dial-size, 2.5rem);
+	}
+
+	:has(> .sonic-dial):not([hidden]) {
+		display: contents;
+	}
+
+	sonic-dial:not(:defined, [hidden]) {
+		display: block;
+		flex-shrink: 0;
+		inline-size: var(--_sonic-dial-size);
+		block-size: var(--_sonic-dial-size);
+	}
+
+	.sonic-dial {
+		--_sonic-dial-ring-ratio: var(--sonic-dial-ring-ratio, 0.075);
+		--_sonic-dial-gap-ratio: var(--sonic-dial-gap-ratio, 0.05);
+		--_sonic-dial-pointer-ratio: var(--sonic-dial-pointer-ratio, 0.06);
+
+		/* 0 for a straight bar */
+		--_sonic-dial-pointer-taper: var(--sonic-dial-pointer-taper, 0.5);
+
+		/* A fraction of the knob's angle */
+		--_sonic-dial-face-drift: var(--sonic-dial-face-drift, 0.1);
+		--_sonic-dial-notch-ratio: var(--sonic-dial-notch-ratio, 0.1);
+
+		/* Centred on six o'clock */
+		--_sonic-dial-sweep: var(--sonic-dial-sweep, 300deg);
+
+		/* Absolute, so a larger knob gets more ridges rather than wider ones */
+		--_sonic-dial-ridge-pitch: var(--sonic-dial-ridge-pitch, 4px);
+
+		/* Read by the element as px */
+		--_sonic-dial-travel: var(--sonic-dial-travel, 160px);
+		--_sonic-unit: calc(var(--_sonic-dial-size) / 40);
+		--_sonic-dial-lit: var(--_sonic-lit);
+		--_sonic-dial-notch-band: 0px;
+		--_sonic-dial-start: calc(180deg + (1turn - var(--_sonic-dial-sweep)) / 2);
+		--_sonic-dial-angle: calc(var(--_sonic-dial-value, 0) * var(--_sonic-dial-sweep));
+		--_sonic-dial-ring-width: calc(var(--_sonic-dial-size) * var(--_sonic-dial-ring-ratio));
+		--_sonic-dial-cap-inset: calc(
+			var(--_sonic-dial-notch-band) + var(--_sonic-dial-size) *
+				(var(--_sonic-dial-ring-ratio) + var(--_sonic-dial-gap-ratio))
+		);
+
+		/* `tan(atan2())` divides one length by another, which plain `calc()` can't yet do everywhere */
+		--_sonic-dial-ridge-angle: calc(
+			1turn /
+				round(
+					tan(
+							atan2(
+								var(--_sonic-dial-size) - 2 * var(--_sonic-dial-cap-inset),
+								var(--_sonic-dial-ridge-pitch)
+							)
+						) *
+						3.1416,
+					1
+				)
+		);
+
+		position: relative;
+		flex-shrink: 0;
+		inline-size: var(--_sonic-dial-size);
+		block-size: var(--_sonic-dial-size);
+		touch-action: none;
+		cursor: ns-resize;
+		user-select: none;
+		border-radius: 50%;
+	}
+
+	:state(dragging) > .sonic-dial {
+		--_sonic-cap: var(--_sonic-cap-hover);
+	}
+
+	[notched] > .sonic-dial {
+		--_sonic-dial-notch-band: calc(var(--_sonic-dial-size) * var(--_sonic-dial-notch-ratio));
+	}
+
+	/* Set on `--_sonic-dial-lit`, since `--_sonic-lit` cannot reference itself */
+	[dimmed] > .sonic-dial {
+		--_sonic-dial-lit: var(--_sonic-lit-off);
+	}
+
+	[disabled] > .sonic-dial {
+		--_sonic-dial-lit: var(--_sonic-lit-disabled);
+
+		cursor: default;
+	}
+
+	.sonic-dial-notches {
+		--_sonic-dial-notch-width: atan2(var(--_sonic-unit), var(--_sonic-dial-size) / 2);
+		--_sonic-dial-notch-pitch: calc(
+			var(--_sonic-dial-sweep) / (var(--_sonic-dial-positions, 2) - 1)
+		);
+
+		position: absolute;
+		inset: 0;
+		background: repeating-conic-gradient(
+			from calc(var(--_sonic-dial-start) - var(--_sonic-dial-notch-width) / 2),
+			var(--_sonic-etch) 0 var(--_sonic-dial-notch-width),
+			transparent 0 var(--_sonic-dial-notch-pitch)
+		);
+		border-radius: 50%;
+		mask:
+			radial-gradient(
+				closest-side,
+				transparent calc(100% - var(--_sonic-dial-notch-band) * 0.8),
+				#000 0 calc(100% - var(--_sonic-dial-notch-band) * 0.25),
+				transparent 0
+			),
+			conic-gradient(
+				from calc(var(--_sonic-dial-start) - var(--_sonic-dial-notch-width)),
+				#000 calc(var(--_sonic-dial-sweep) + 2 * var(--_sonic-dial-notch-width)),
+				transparent 0
+			);
+		mask-composite: intersect;
+	}
+
+	:is(.sonic-dial-ring, .sonic-dial-modulation) {
+		position: absolute;
+		inset: var(--_sonic-dial-notch-band);
+		border-radius: 50%;
+		mask: radial-gradient(
+			closest-side,
+			transparent calc(100% - var(--_sonic-dial-ring-width) - 0.5px),
+			#000 calc(100% - var(--_sonic-dial-ring-width)),
+			#000 calc(100% - var(--_sonic-dial-band-inset) - 0.5px),
+			transparent calc(100% - var(--_sonic-dial-band-inset))
+		);
+	}
+
+	.sonic-dial-ring {
+		--_sonic-dial-band-inset: 0px;
+		--_sonic-dial-lit-from: calc(
+			min(var(--_sonic-dial-origin, 0), var(--_sonic-dial-value, 0)) * var(--_sonic-dial-sweep)
+		);
+		--_sonic-dial-lit-to: calc(
+			max(var(--_sonic-dial-origin, 0), var(--_sonic-dial-value, 0)) * var(--_sonic-dial-sweep)
+		);
+
+		background:
+			radial-gradient(
+				closest-side,
+				rgb(0 0 0 / 55%) calc(100% - var(--_sonic-dial-ring-width)),
+				transparent calc(100% - var(--_sonic-dial-ring-width) * 0.4),
+				rgb(0 0 0 / 25%) 100%
+			),
+			conic-gradient(
+				from var(--_sonic-dial-start),
+				var(--_sonic-unlit) var(--_sonic-dial-lit-from),
+				var(--_sonic-dial-lit) 0 var(--_sonic-dial-lit-to),
+				var(--_sonic-unlit) 0 var(--_sonic-dial-sweep),
+				transparent 0
+			);
+	}
+
+	.sonic-dial-modulation {
+		--_sonic-dial-modulation: var(
+			--sonic-modulation,
+			color-mix(in oklab, var(--_sonic-dial-lit) 60%, #000)
+		);
+		--_sonic-dial-band-inset: calc(var(--_sonic-dial-ring-width) * 0.55);
+
+		background: conic-gradient(
+			from var(--_sonic-dial-start),
+			transparent calc(var(--_sonic-dial-modulation-from, 0) * var(--_sonic-dial-sweep)),
+			var(--_sonic-dial-modulation) 0
+				calc(var(--_sonic-dial-modulation-to, 0) * var(--_sonic-dial-sweep)),
+			transparent 0
+		);
+	}
+
+	:not([notched]) > .sonic-dial > .sonic-dial-notches,
+	:not([modulation]) > .sonic-dial > .sonic-dial-modulation {
+		display: none;
+	}
+
+	.sonic-dial-cap {
+		position: absolute;
+		inset: var(--_sonic-dial-cap-inset);
+		background: var(--_sonic-skirt);
+		border-radius: 50%;
+		box-shadow:
+			calc(2 * var(--_sonic-cast-x)) calc(2 * var(--_sonic-cast-y)) calc(4 * var(--_sonic-unit))
+				rgb(0 0 0 / 65%),
+			var(--_sonic-rim),
+			var(--_sonic-focus-shadow);
+
+		&::before,
+		&::after {
+			position: absolute;
+			content: '';
+			border-radius: 50%;
+		}
+
+		&::before {
+			inset: 0;
+			background: repeating-conic-gradient(
+				rgb(0 0 0 / 30%) 0,
+				rgb(255 255 255 / 12%) calc(var(--_sonic-dial-ridge-angle) / 2),
+				rgb(0 0 0 / 30%) var(--_sonic-dial-ridge-angle)
+			);
+			rotate: var(--_sonic-dial-angle);
+		}
+
+		&::after {
+			inset: 16%;
+			background:
+				conic-gradient(
+					from
+						calc(
+							var(--_sonic-dial-face-drift) * var(--_sonic-dial-angle) - var(--_sonic-light-tilt)
+						),
+					rgb(255 255 255 / 16%),
+					transparent 12%,
+					rgb(0 0 0 / 10%) 25%,
+					transparent 38%,
+					rgb(255 255 255 / 12%) 50%,
+					transparent 62%,
+					rgb(0 0 0 / 10%) 75%,
+					transparent 88%,
+					rgb(255 255 255 / 16%)
+				),
+				var(--_sonic-face);
+			box-shadow: var(--_sonic-face-shadow);
+		}
+	}
+
+	.sonic-dial-pointer {
+		position: absolute;
+		inset: var(--_sonic-dial-cap-inset);
+		pointer-events: none;
+		border-radius: 50%;
+		rotate: calc(var(--_sonic-dial-start) + var(--_sonic-dial-angle));
+
+		/* Evenly shaded, since any offset would turn with the knob */
+		&::before {
+			--_sonic-dial-pointer-width: calc(var(--_sonic-dial-size) * var(--_sonic-dial-pointer-ratio));
+
+			position: absolute;
+			inset-block-start: 6%;
+			inset-inline-start: 50%;
+			inline-size: var(--_sonic-dial-pointer-width);
+			block-size: 34%;
+			content: '';
+			background: var(--_sonic-ink);
+			border-radius: calc(var(--_sonic-dial-pointer-width) / 2);
+			box-shadow: inset 0 0 calc(0.75 * var(--_sonic-unit)) rgb(0 0 0 / 55%);
+			clip-path: polygon(
+				calc(50% * var(--_sonic-dial-pointer-taper)) 0,
+				calc(100% - 50% * var(--_sonic-dial-pointer-taper)) 0,
+				100% 100%,
+				0 100%
+			);
+			translate: -50% 0;
+		}
+	}
+
+	[disabled] > .sonic-dial > .sonic-dial-pointer::before {
+		background: var(--_sonic-etch);
+	}
+}