@xsynaptic/sonic-ui 0.2.0 → 0.3.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

@@ -25,7 +25,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,7 +44,7 @@ var SonicDial = class extends SonicRangeElement {
 	}
 	#dial = renderDial();
 	connectedCallback() {
-		this.upgradeProperties("modulation");
+		this.upgradeProperties("endless", "modulation");
 		super.connectedCallback();
 	}
 	connect(signal) {
@@ -53,16 +63,18 @@ 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.renderAria(dial);
 	}
+	wraps() {
+		return this.endless;
+	}
 };
 
 //#endregion

package/dist/default/elements/number.js

@@ -0,0 +1,46 @@
+import { requireChild, template } from "../lib/render.js";
+import { SonicRangeElement } from "./range-element.js";
+import { readPxProperty } from "../lib/read-px-property.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 };

package/dist/default/elements/range-element.js

@@ -2,7 +2,7 @@ import { requireChild } from "../lib/render.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
 import { RangeEntry } from "./range-entry.js";
-import { clampUnit, linearTaper, logTaper, skewTaper } from "../lib/taper.js";
+import { clampUnit, linearTaper, logTaper, skewTaper, wrapUnit } from "../lib/taper.js";
 
 //#region src/elements/range-element.ts
 const fineScale = .1;
@@ -21,7 +21,7 @@ const keySteps = /* @__PURE__ */ new Map([
 	["PageDown", -10],
 	["PageUp", pageSteps]
 ]);
-const sliderAttributes = [
+const roleAttributes = [
 	"aria-disabled",
 	"aria-orientation",
 	"aria-valuemax",
@@ -192,7 +192,8 @@ var SonicRangeElement = class extends SonicFormElement {
 			if (event.pointerId !== drag?.pointerId) return;
 			const position = drag.position(event);
 			const scale = event.shiftKey ? fineScale : 1;
-			drag.rawFraction = clampUnit(drag.rawFraction + (position - drag.lastPosition) / drag.travelPx * scale);
+			const fraction = drag.rawFraction + (position - drag.lastPosition) / drag.travelPx * scale;
+			drag.rawFraction = this.wraps() ? wrapUnit(fraction) : clampUnit(fraction);
 			drag.lastPosition = position;
 			if (Math.abs(position - drag.startPosition) >= revealPx) this.#reveal(drag);
 			this.input(this.valueAt(drag.rawFraction));
@@ -219,7 +220,15 @@ var SonicRangeElement = class extends SonicFormElement {
 		}, { once: true });
 	}
 	clampRange(next) {
-		return Math.min(this.#max(), Math.max(this.min, next));
+		const min = this.min;
+		if (!this.wraps()) return Math.min(this.#max(), Math.max(min, next));
+		const range = this.range();
+		if (range <= 0) return min;
+		const offset = Number((((next - min) % range + range) % range).toPrecision(12));
+		return offset >= range ? min : Number((min + offset).toPrecision(12));
+	}
+	controlRole() {
+		return "slider";
 	}
 	fraction(value) {
 		return (this.#taper() ?? linearTaper(this.min, this.#max())).position(value);
@@ -234,11 +243,16 @@ var SonicRangeElement = class extends SonicFormElement {
 		}));
 		return true;
 	}
+	modulationFractions(amount) {
+		const value = this.fraction(this.#value);
+		const modulated = this.fraction(this.#value + amount);
+		return [Math.min(value, modulated), Math.max(value, modulated)];
+	}
 	originFraction() {
 		return this.fraction(this.origin ?? this.min);
 	}
 	positions() {
-		const positions = Math.round(this.range() / this.step) + 1;
+		const positions = Math.round(this.range() / this.step) + (this.wraps() ? 0 : 1);
 		if (!this.notched || !Number.isFinite(positions) || positions < 2) return;
 		return positions;
 	}
@@ -248,12 +262,12 @@ var SonicRangeElement = class extends SonicFormElement {
 	renderAria(control, orientation) {
 		this.writeFormValue(String(this.#value), String(this.#value));
 		if (this.#entry?.isOpen) {
-			for (const name of sliderAttributes) control.removeAttribute(name);
+			for (const name of roleAttributes) control.removeAttribute(name);
 			this.forwardNaming(control, false);
 			this.#renderReadout();
 			return;
 		}
-		control.setAttribute("role", "slider");
+		control.setAttribute("role", this.controlRole());
 		control.setAttribute("aria-valuemin", String(this.min));
 		control.setAttribute("aria-valuemax", String(this.#max()));
 		control.setAttribute("aria-valuenow", String(this.#value));
@@ -269,22 +283,30 @@ var SonicRangeElement = class extends SonicFormElement {
 	valueAt(fraction) {
 		return (this.#taper() ?? linearTaper(this.min, this.#max())).value(fraction);
 	}
+	valueText() {
+		return this.#formatValue?.(this.#value) ?? String(this.#value);
+	}
+	wraps() {
+		return false;
+	}
 	#bindEntry(control, signal) {
 		const input = requireChild(control, "input", HTMLInputElement);
-		const bubble = requireChild(control, "[popover]", HTMLElement);
-		const anchor = `--sonic-readout-${this.#instance}`;
+		const bubble = control.querySelector("[popover]");
 		input.id = `sonic-entry-${this.#instance}`;
-		this.#readout = {
-			bubble,
-			text: requireChild(bubble, "span", HTMLElement)
-		};
-		control.style.setProperty("anchor-name", anchor);
-		bubble.style.setProperty("position-anchor", anchor);
+		if (bubble) {
+			const anchor = `--sonic-readout-${this.#instance}`;
+			this.#readout = {
+				bubble,
+				text: requireChild(bubble, "span", HTMLElement)
+			};
+			control.style.setProperty("anchor-name", anchor);
+			bubble.style.setProperty("position-anchor", anchor);
+		}
 		const entry = new RangeEntry(input, {
 			commit: (text) => {
 				this.#commit((this.#parseValue ?? Number.parseFloat)(text));
 			},
-			text: () => this.#parseValue ? this.#valueText() : String(this.#value),
+			text: () => this.#parseValue ? this.valueText() : String(this.#value),
 			toggle: (isOpen) => {
 				if (isOpen) this.forwardNaming(input, true);
 				this.toggleState("editing", isOpen);
@@ -322,6 +344,10 @@ var SonicRangeElement = class extends SonicFormElement {
 	#commit(next) {
 		if (this.input(next)) this.dispatchEvent(new Event("change", { bubbles: true }));
 	}
+	#end(step) {
+		if (!this.wraps()) return this.#max();
+		return this.min + (Math.ceil(this.range() / step) - 1) * step;
+	}
 	#endDrag() {
 		const drag = this.#drag;
 		if (!drag) return;
@@ -342,11 +368,11 @@ var SonicRangeElement = class extends SonicFormElement {
 	}
 	#keyTarget(key) {
 		if (key === "Home") return this.min;
-		if (key === "End") return this.#max();
+		const step = this.step > 0 ? this.step : this.range() / 100;
+		if (key === "End") return this.#end(step);
 		if (resetKeys.has(key)) return this.default;
 		const steps = keySteps.get(key);
 		if (steps === void 0) return void 0;
-		const step = this.step > 0 ? this.step : this.range() / 100;
 		const taper = this.#taper();
 		if (!taper) return this.#value + steps * step;
 		const next = this.#clamp(taper.value(taper.position(this.#value) + steps / 100));
@@ -369,7 +395,7 @@ var SonicRangeElement = class extends SonicFormElement {
 		if (!readout || !canPopover || !this.isConnected) return;
 		const isEditing = this.#entry?.isOpen === true;
 		readout.text.hidden = isEditing;
-		if (!isEditing) readout.text.textContent = this.#valueText();
+		if (!isEditing) readout.text.textContent = this.valueText();
 		readout.bubble.togglePopover(isEditing || this.#isValueShown());
 	}
 	#reset() {
@@ -388,14 +414,11 @@ var SonicRangeElement = class extends SonicFormElement {
 		this.#renderReadout();
 	}
 	#taper() {
-		if (this.notched) return void 0;
+		if (this.notched || this.wraps()) return void 0;
 		const min = this.min;
 		const max = this.#max();
 		return (this.taper === "log" ? logTaper(min, max) : void 0) ?? skewTaper(min, max, this.midpoint ?? NaN);
 	}
-	#valueText() {
-		return this.#formatValue?.(this.#value) ?? String(this.#value);
-	}
 	#write(next) {
 		if (!Number.isFinite(next)) return;
 		this.#isDirty = true;

package/dist/default/elements/slider.js

@@ -6,6 +6,7 @@ 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-modulation"></div>
 			<div class="sonic-slider-cap"></div>
 			<div class="sonic-slider-readout" popover="manual">
 				<span></span>
@@ -21,13 +22,23 @@ const renderSlider = template(`
 		</div>
 	`, HTMLDivElement);
 var SonicSlider = class extends SonicRangeElement {
-	static observedAttributes = [...SonicRangeElement.observedAttributes, "orientation"];
+	static observedAttributes = [
+		...SonicRangeElement.observedAttributes,
+		"modulation",
+		"orientation"
+	];
 	get groovePress() {
 		return this.getAttribute("groove-press") === "none" ? "none" : "jump";
 	}
 	set groovePress(gesture) {
 		this.reflect("groove-press", gesture);
 	}
+	get modulation() {
+		return this.numberAttribute("modulation", 0);
+	}
+	set modulation(amount) {
+		this.reflect("modulation", amount);
+	}
 	get orientation() {
 		return this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
 	}
@@ -36,7 +47,7 @@ var SonicSlider = class extends SonicRangeElement {
 	}
 	#slider = renderSlider();
 	connectedCallback() {
-		this.upgradeProperties("groovePress", "orientation");
+		this.upgradeProperties("groovePress", "modulation", "orientation");
 		super.connectedCallback();
 	}
 	connect(signal) {
@@ -59,8 +70,11 @@ var SonicSlider = class extends SonicRangeElement {
 	render() {
 		const slider = this.#slider;
 		const positions = this.positions();
+		const [modulationFrom, modulationTo] = this.modulationFractions(this.modulation);
 		slider.style.setProperty("--_sonic-slider-value", String(this.fraction(this.value)));
 		slider.style.setProperty("--_sonic-slider-origin", String(this.originFraction()));
+		slider.style.setProperty("--_sonic-slider-modulation-from", String(modulationFrom));
+		slider.style.setProperty("--_sonic-slider-modulation-to", String(modulationTo));
 		if (positions === void 0) slider.style.removeProperty("--_sonic-slider-positions");
 		else slider.style.setProperty("--_sonic-slider-positions", String(positions));
 		this.renderAria(slider, this.orientation);

package/dist/default/index.js

@@ -1,8 +1,9 @@
 import { SonicDial } from "./elements/dial.js";
 import { SonicKey } from "./elements/key.js";
 import { SonicMeter } from "./elements/meter.js";
+import { SonicNumber } from "./elements/number.js";
 import { SonicSegmented } from "./elements/segmented.js";
 import { SonicSlider } from "./elements/slider.js";
 import { formatPercent, parsePercent } from "./lib/percent.js";
 
-export { SonicDial, SonicKey, SonicMeter, SonicSegmented, SonicSlider, formatPercent, parsePercent };
+export { SonicDial, SonicKey, SonicMeter, SonicNumber, SonicSegmented, SonicSlider, formatPercent, parsePercent };

package/dist/default/lib/taper.js

@@ -2,6 +2,9 @@
 function clampUnit(fraction) {
 	return Math.min(1, Math.max(0, fraction));
 }
+function wrapUnit(fraction) {
+	return fraction - Math.floor(fraction);
+}
 function linearTaper(min, max) {
 	const range = max - min;
 	return {
@@ -29,4 +32,4 @@ function skewTaper(min, max, midpoint) {
 }
 
 //#endregion
-export { clampUnit, linearTaper, logTaper, skewTaper };
+export { clampUnit, linearTaper, logTaper, skewTaper, wrapUnit };

package/dist/dev/define/number.d.ts

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

package/dist/dev/define/number.js

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

package/dist/dev/define/number.js.map

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

package/dist/dev/define.d.ts

@@ -4,8 +4,10 @@ import { SonicKey } from "./elements/key.js";
 import "./define/key.js";
 import { SonicMeter } from "./elements/meter.js";
 import "./define/meter.js";
+import { SonicNumber } from "./elements/number.js";
+import "./define/number.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 };
+export type { SonicDial, SonicKey, SonicMeter, SonicNumber, SonicSegmented, SonicSlider };

package/dist/dev/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/dev/elements/dial.d.ts

@@ -8,12 +8,15 @@ declare global {
 export declare class SonicDial extends SonicRangeElement {
   #private;
   static readonly observedAttributes: string[];
+  get endless(): boolean;
+  set endless(isEndless: boolean);
   get modulation(): number;
   set modulation(amount: number | undefined);
   connectedCallback(): void;
   protected connect(signal: AbortSignal): void;
   protected focusTarget(): HTMLElement;
   protected render(): void;
+  protected wraps(): boolean;
 }
 //#endregion
 //# sourceMappingURL=dial.d.ts.map

package/dist/dev/elements/dial.js

@@ -25,7 +25,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,7 +44,7 @@ var SonicDial = class extends SonicRangeElement {
 	}
 	#dial = renderDial();
 	connectedCallback() {
-		this.upgradeProperties("modulation");
+		this.upgradeProperties("endless", "modulation");
 		super.connectedCallback();
 	}
 	connect(signal) {
@@ -53,16 +63,18 @@ 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.renderAria(dial);
 	}
+	wraps() {
+		return this.endless;
+	}
 };
 
 //#endregion

package/dist/dev/elements/dial.js.map

@@ -1 +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\tget modulation(): number {\n\t\treturn this.numberAttribute('modulation', 0);\n\t}\n\n\tset modulation(amount: number | undefined) {\n\t\tthis.reflect('modulation', amount);\n\t}\n\n\treadonly #dial = renderDial();\n\n\toverride connectedCallback(): void {\n\t\tthis.upgradeProperties('modulation');\n\t\tsuper.connectedCallback();\n\t}\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 override focusTarget(): HTMLElement {\n\t\treturn this.#dial;\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.modulation);\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,IAAI,aAAqB;EACxB,OAAO,KAAK,gBAAgB,cAAc,CAAC;CAC5C;CAEA,IAAI,WAAW,QAA4B;EAC1C,KAAK,QAAQ,cAAc,MAAM;CAClC;CAEA,AAAS,QAAQ,WAAW;CAE5B,AAAS,oBAA0B;EAClC,KAAK,kBAAkB,YAAY;EACnC,MAAM,kBAAkB;CACzB;CAEA,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,AAAmB,cAA2B;EAC7C,OAAO,KAAK;CACb;CAEA,AAAU,SAAe;EACxB,MAAM,OAAO,KAAK;EAClB,MAAM,YAAY,KAAK,UAAU;EACjC,MAAM,YAAY,KAAK,SAAS,KAAK,QAAQ,KAAK,UAAU;EAC5D,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"}
+{"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'endless',\n\t\t'modulation',\n\t];\n\n\tget endless(): boolean {\n\t\treturn this.hasAttribute('endless');\n\t}\n\n\tset endless(isEndless: boolean) {\n\t\tthis.reflect('endless', isEndless);\n\t}\n\n\tget modulation(): number {\n\t\treturn this.numberAttribute('modulation', 0);\n\t}\n\n\tset modulation(amount: number | undefined) {\n\t\tthis.reflect('modulation', amount);\n\t}\n\n\treadonly #dial = renderDial();\n\n\toverride connectedCallback(): void {\n\t\tthis.upgradeProperties('endless', 'modulation');\n\t\tsuper.connectedCallback();\n\t}\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 override focusTarget(): HTMLElement {\n\t\treturn this.#dial;\n\t}\n\n\tprotected render(): void {\n\t\tconst dial = this.#dial;\n\t\tconst positions = this.positions();\n\t\tconst [modulationFrom, modulationTo] = this.modulationFractions(\n\t\t\tthis.endless ? 0 : this.modulation,\n\t\t);\n\n\t\tdial.style.setProperty('--_sonic-dial-value', String(this.fraction(this.value)));\n\t\tdial.style.setProperty('--_sonic-dial-origin', String(this.originFraction()));\n\t\tdial.style.setProperty('--_sonic-dial-modulation-from', String(modulationFrom));\n\t\tdial.style.setProperty('--_sonic-dial-modulation-to', String(modulationTo));\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\tprotected override wraps(): boolean {\n\t\treturn this.endless;\n\t}\n}\n"],"mappings":";;;;;AAUA,MAAM,aAAa,SACP;;;;;;;;;;;;;;;;;;;IAoBX,cACD;AAEA,MAAM,mBAAmB;AAEzB,IAAa,YAAb,cAA+B,kBAAkB;CAChD,OAAyB,qBAAqB;EAC7C,GAAG,kBAAkB;EACrB;EACA;CACD;CAEA,IAAI,UAAmB;EACtB,OAAO,KAAK,aAAa,SAAS;CACnC;CAEA,IAAI,QAAQ,WAAoB;EAC/B,KAAK,QAAQ,WAAW,SAAS;CAClC;CAEA,IAAI,aAAqB;EACxB,OAAO,KAAK,gBAAgB,cAAc,CAAC;CAC5C;CAEA,IAAI,WAAW,QAA4B;EAC1C,KAAK,QAAQ,cAAc,MAAM;CAClC;CAEA,AAAS,QAAQ,WAAW;CAE5B,AAAS,oBAA0B;EAClC,KAAK,kBAAkB,WAAW,YAAY;EAC9C,MAAM,kBAAkB;CACzB;CAEA,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,AAAmB,cAA2B;EAC7C,OAAO,KAAK;CACb;CAEA,AAAU,SAAe;EACxB,MAAM,OAAO,KAAK;EAClB,MAAM,YAAY,KAAK,UAAU;EACjC,MAAM,CAAC,gBAAgB,gBAAgB,KAAK,oBAC3C,KAAK,UAAU,IAAI,KAAK,UACzB;EAEA,KAAK,MAAM,YAAY,uBAAuB,OAAO,KAAK,SAAS,KAAK,KAAK,CAAC,CAAC;EAC/E,KAAK,MAAM,YAAY,wBAAwB,OAAO,KAAK,eAAe,CAAC,CAAC;EAC5E,KAAK,MAAM,YAAY,iCAAiC,OAAO,cAAc,CAAC;EAC9E,KAAK,MAAM,YAAY,+BAA+B,OAAO,YAAY,CAAC;EAC1E,IAAI,cAAc,QAAW,KAAK,MAAM,eAAe,yBAAyB;OAC3E,KAAK,MAAM,YAAY,2BAA2B,OAAO,SAAS,CAAC;EACxE,KAAK,WAAW,IAAI;CACrB;CAEA,AAAmB,QAAiB;EACnC,OAAO,KAAK;CACb;AACD"}

package/dist/dev/elements/number.d.ts

@@ -0,0 +1,16 @@
+import { SonicRangeElement } from "./range-element.js";
+//#region src/elements/number.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    'sonic-number': SonicNumber;
+  }
+}
+export declare class SonicNumber extends SonicRangeElement {
+  #private;
+  protected connect(signal: AbortSignal): void;
+  protected controlRole(): 'spinbutton';
+  protected focusTarget(): HTMLElement;
+  protected render(): void;
+}
+//#endregion
+//# sourceMappingURL=number.d.ts.map

package/dist/dev/elements/number.js

@@ -0,0 +1,47 @@
+import { requireChild, template } from "../lib/render.js";
+import { SonicRangeElement } from "./range-element.js";
+import { readPxProperty } from "../lib/read-px-property.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 };
+//# sourceMappingURL=number.js.map

package/dist/dev/elements/number.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number.js","names":[],"sources":["../../../src/elements/number.ts"],"sourcesContent":["import { SonicRangeElement } from '#elements/range-element.ts';\nimport { readPxProperty } from '#lib/read-px-property.ts';\nimport { requireChild, template } from '#lib/render.ts';\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sonic-number': SonicNumber;\n\t}\n}\n\nconst renderNumber = template(\n\t/* HTML */ `\n\t\t<div class=\"sonic-number\" role=\"spinbutton\" tabindex=\"0\">\n\t\t\t<span aria-hidden=\"true\" class=\"sonic-number-value\"></span>\n\t\t\t<input\n\t\t\t\tautocomplete=\"off\"\n\t\t\t\tclass=\"sonic-number-entry\"\n\t\t\t\tenterkeyhint=\"done\"\n\t\t\t\thidden\n\t\t\t\tspellcheck=\"false\"\n\t\t\t\ttype=\"text\"\n\t\t\t/>\n\t\t</div>\n\t`,\n\tHTMLDivElement,\n);\n\nconst fallbackTravelPx = 160;\n\nexport class SonicNumber extends SonicRangeElement {\n\treadonly #number = renderNumber();\n\n\treadonly #digits = requireChild(this.#number, '.sonic-number-value', HTMLSpanElement);\n\n\tprotected connect(signal: AbortSignal): void {\n\t\tconst number = this.#number;\n\n\t\tthis.appendOnce(number);\n\t\tthis.render();\n\t\tthis.checkStyles(number, 'number.css');\n\t\tthis.bindGestures(number, signal, () => ({\n\t\t\tposition: (event) => -event.clientY,\n\t\t\ttravelPx: readPxProperty(\n\t\t\t\tgetComputedStyle(number),\n\t\t\t\t'--_sonic-number-travel',\n\t\t\t\tfallbackTravelPx,\n\t\t\t),\n\t\t}));\n\t}\n\n\tprotected override controlRole(): 'spinbutton' {\n\t\treturn 'spinbutton';\n\t}\n\n\tprotected override focusTarget(): HTMLElement {\n\t\treturn this.#number;\n\t}\n\n\tprotected render(): void {\n\t\tthis.#digits.textContent = this.valueText();\n\t\tthis.renderAria(this.#number);\n\t}\n}\n"],"mappings":";;;;;AAUA,MAAM,eAAe,SACT;;;;;;;;;;;;IAaX,cACD;AAEA,MAAM,mBAAmB;AAEzB,IAAa,cAAb,cAAiC,kBAAkB;CAClD,AAAS,UAAU,aAAa;CAEhC,AAAS,UAAU,aAAa,KAAK,SAAS,uBAAuB,eAAe;CAEpF,AAAU,QAAQ,QAA2B;EAC5C,MAAM,SAAS,KAAK;EAEpB,KAAK,WAAW,MAAM;EACtB,KAAK,OAAO;EACZ,KAAK,YAAY,QAAQ,YAAY;EACrC,KAAK,aAAa,QAAQ,eAAe;GACxC,WAAW,UAAU,CAAC,MAAM;GAC5B,UAAU,eACT,iBAAiB,MAAM,GACvB,0BACA,gBACD;EACD,EAAE;CACH;CAEA,AAAmB,cAA4B;EAC9C,OAAO;CACR;CAEA,AAAmB,cAA2B;EAC7C,OAAO,KAAK;CACb;CAEA,AAAU,SAAe;EACxB,KAAK,QAAQ,cAAc,KAAK,UAAU;EAC1C,KAAK,WAAW,KAAK,OAAO;CAC7B;AACD"}

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

@@ -39,14 +39,18 @@ export declare abstract class SonicRangeElement extends SonicFormElement {
   connectedCallback(): void;
   protected bindGestures(control: HTMLElement, signal: AbortSignal, grab: (event: PointerEvent) => RangeAxis | undefined): void;
   protected clampRange(next: number): number;
+  protected controlRole(): 'slider' | 'spinbutton';
   protected fraction(value: number): number;
   protected input(next: number): boolean;
+  protected modulationFractions(amount: number): [number, number];
   protected originFraction(): number;
   protected positions(): number | undefined;
   protected range(): number;
   protected renderAria(control: HTMLElement, orientation?: 'horizontal' | 'vertical'): void;
   protected restoreState(state: string): void;
   protected valueAt(fraction: number): number;
+  protected valueText(): string;
+  protected wraps(): boolean;
 }
 //#endregion
 //# sourceMappingURL=range-element.d.ts.map