@xsynaptic/sonic-ui 0.3.0 → 0.5.0

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

@@ -1,433 +0,0 @@
-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, wrapUnit } from "../lib/taper.js";
-
-//#region src/elements/range-element.ts
-const fineScale = .1;
-const keyRevealMs = 1e3;
-const pageSteps = 10;
-const revealMs = 250;
-const revealPx = 4;
-const canPopover = "togglePopover" in HTMLElement.prototype;
-let instanceCount = 0;
-const resetKeys = /* @__PURE__ */ new Set(["Backspace", "Delete"]);
-const keySteps = /* @__PURE__ */ new Map([
-	["ArrowDown", -1],
-	["ArrowLeft", -1],
-	["ArrowRight", 1],
-	["ArrowUp", 1],
-	["PageDown", -10],
-	["PageUp", pageSteps]
-]);
-const roleAttributes = [
-	"aria-disabled",
-	"aria-orientation",
-	"aria-valuemax",
-	"aria-valuemin",
-	"aria-valuenow",
-	"aria-valuetext",
-	"role",
-	"tabindex"
-];
-var SonicRangeElement = class extends SonicFormElement {
-	static observedAttributes = [
-		...SonicFormElement.observedAttributes,
-		"max",
-		"midpoint",
-		"min",
-		"notched",
-		"origin",
-		"readout",
-		"step",
-		"taper",
-		"value"
-	];
-	get default() {
-		return this.optionalNumberAttribute("default");
-	}
-	set default(value) {
-		this.reflect("default", value);
-	}
-	get dimmed() {
-		return this.hasAttribute("dimmed");
-	}
-	set dimmed(isDimmed) {
-		this.reflect("dimmed", isDimmed);
-	}
-	get doublePress() {
-		return this.getAttribute("double-press") === "reset" ? "reset" : "type";
-	}
-	set doublePress(gesture) {
-		this.reflect("double-press", gesture);
-	}
-	get formatValue() {
-		return this.#formatValue;
-	}
-	set formatValue(format) {
-		this.#formatValue = format;
-		this.render();
-	}
-	get max() {
-		return this.numberAttribute("max", 100);
-	}
-	set max(value) {
-		this.reflect("max", value);
-	}
-	get midpoint() {
-		return this.optionalNumberAttribute("midpoint");
-	}
-	set midpoint(value) {
-		this.reflect("midpoint", value);
-	}
-	get min() {
-		return this.numberAttribute("min", 0);
-	}
-	set min(value) {
-		this.reflect("min", value);
-	}
-	get notched() {
-		return this.hasAttribute("notched");
-	}
-	set notched(isNotched) {
-		this.reflect("notched", isNotched);
-	}
-	get origin() {
-		return this.optionalNumberAttribute("origin");
-	}
-	set origin(value) {
-		this.reflect("origin", value);
-	}
-	get parseValue() {
-		return this.#parseValue;
-	}
-	set parseValue(parse) {
-		this.#parseValue = parse;
-	}
-	get readout() {
-		return this.hasAttribute("readout");
-	}
-	set readout(isShown) {
-		this.reflect("readout", isShown);
-	}
-	get step() {
-		return this.numberAttribute("step", 1);
-	}
-	set step(value) {
-		this.reflect("step", value);
-	}
-	get taper() {
-		return this.getAttribute("taper") === "log" ? "log" : "linear";
-	}
-	set taper(curve) {
-		this.reflect("taper", curve);
-	}
-	get value() {
-		return this.#value;
-	}
-	set value(next) {
-		if (this.#drag) return;
-		this.#write(next);
-	}
-	#drag;
-	#entry;
-	#formatValue;
-	#instance = String(instanceCount += 1);
-	#isDirty = false;
-	#keyRevealTimer;
-	#parseValue;
-	#readout;
-	#value = 0;
-	attributeChangedCallback(name) {
-		if (name === "value") {
-			if (this.#drag) return;
-			this.#isDirty = false;
-		}
-		if (name === "disabled" && this.isDisabled()) {
-			this.#entry?.close(false);
-			this.#endDrag();
-		}
-		this.#value = this.#clamp(this.#isDirty ? this.#value : this.numberAttribute("value", this.min));
-		this.render();
-	}
-	connectedCallback() {
-		this.upgradeProperties("default", "dimmed", "doublePress", "max", "midpoint", "min", "notched", "origin", "readout", "step", "taper", "formatValue", "parseValue", "value");
-		super.connectedCallback();
-	}
-	bindGestures(control, signal, grab) {
-		const entry = this.#bindEntry(control, signal);
-		control.addEventListener("pointerdown", (event) => {
-			if (event.button !== 0 || this.isDisabled() || entry.isOpen) return;
-			if (event.pointerType === "touch") event.preventDefault();
-			control.focus();
-			if (event.metaKey || event.ctrlKey) {
-				this.#reset();
-				return;
-			}
-			const fromValue = this.#value;
-			const axis = grab(event);
-			if (!axis) return;
-			const startPosition = axis.position(event);
-			const drag = {
-				fromValue,
-				isRevealed: false,
-				lastPosition: startPosition,
-				pointerId: event.pointerId,
-				position: axis.position,
-				rawFraction: this.fraction(this.#value),
-				revealTimer: void 0,
-				startPosition,
-				travelPx: axis.travelPx
-			};
-			drag.revealTimer = setTimeout(() => {
-				this.#reveal(drag);
-			}, revealMs);
-			this.#drag = drag;
-			control.setPointerCapture(event.pointerId);
-			this.toggleState("dragging", true);
-		}, { signal });
-		control.addEventListener("pointermove", (event) => {
-			const drag = this.#drag;
-			if (event.pointerId !== drag?.pointerId) return;
-			const position = drag.position(event);
-			const scale = event.shiftKey ? fineScale : 1;
-			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));
-		}, { signal });
-		const endDrag = (event) => {
-			if (event.pointerId === this.#drag?.pointerId) this.#endDrag();
-		};
-		control.addEventListener("pointercancel", (event) => {
-			endDrag(event);
-			entry.forgetPress();
-		}, { signal });
-		control.addEventListener("lostpointercapture", endDrag, { signal });
-		control.addEventListener("pointerup", (event) => {
-			if (event.pointerId !== this.#drag?.pointerId) return;
-			this.#endDrag();
-			if (!entry.press(event)) return;
-			if (this.doublePress === "reset") this.#reset();
-			else entry.open();
-		}, { signal });
-		this.#bindKeys(control, entry, signal);
-		signal.addEventListener("abort", () => {
-			this.#endDrag();
-			this.#hideForKeys();
-		}, { once: true });
-	}
-	clampRange(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);
-	}
-	input(next) {
-		const previous = this.#value;
-		this.#write(next);
-		if (this.#value === previous) return false;
-		this.dispatchEvent(new Event("input", {
-			bubbles: true,
-			composed: true
-		}));
-		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) + (this.wraps() ? 0 : 1);
-		if (!this.notched || !Number.isFinite(positions) || positions < 2) return;
-		return positions;
-	}
-	range() {
-		return this.#max() - this.min;
-	}
-	renderAria(control, orientation) {
-		this.writeFormValue(String(this.#value), String(this.#value));
-		if (this.#entry?.isOpen) {
-			for (const name of roleAttributes) control.removeAttribute(name);
-			this.forwardNaming(control, false);
-			this.#renderReadout();
-			return;
-		}
-		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));
-		if (orientation) control.setAttribute("aria-orientation", orientation);
-		writeAttribute(control, "aria-valuetext", this.#formatValue?.(this.#value));
-		this.forwardNaming(control, true);
-		this.#renderDisabled(control);
-		this.#renderReadout();
-	}
-	restoreState(state) {
-		this.value = Number(state);
-	}
-	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 = control.querySelector("[popover]");
-		input.id = `sonic-entry-${this.#instance}`;
-		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),
-			toggle: (isOpen) => {
-				if (isOpen) this.forwardNaming(input, true);
-				this.toggleState("editing", isOpen);
-				this.render();
-			}
-		});
-		this.#entry = entry;
-		entry.bind(control, signal);
-		return entry;
-	}
-	#bindKeys(control, entry, signal) {
-		control.addEventListener("keydown", (event) => {
-			if (this.isDisabled() || event.defaultPrevented || event.target !== control) return;
-			if (event.key === "Enter") {
-				event.preventDefault();
-				entry.open();
-				return;
-			}
-			const next = this.#keyTarget(event.key);
-			if (next === void 0) return;
-			event.preventDefault();
-			this.#commit(next);
-			this.#revealForKeys();
-		}, { signal });
-		control.addEventListener("blur", () => {
-			this.#hideForKeys();
-		}, { signal });
-	}
-	#clamp(next) {
-		const min = this.min;
-		const step = this.step;
-		const stepped = step > 0 ? min + Math.round((next - min) / step) * step : next;
-		return this.clampRange(Number(stepped.toPrecision(12)));
-	}
-	#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;
-		clearTimeout(drag.revealTimer);
-		this.#drag = void 0;
-		this.toggleState("dragging", false);
-		this.#renderReadout();
-		if (this.#value !== drag.fromValue) this.dispatchEvent(new Event("change", { bubbles: true }));
-	}
-	#hideForKeys() {
-		clearTimeout(this.#keyRevealTimer);
-		if (this.#keyRevealTimer === void 0) return;
-		this.#keyRevealTimer = void 0;
-		this.#renderReadout();
-	}
-	#isValueShown() {
-		return (this.#drag?.isRevealed === true || this.#keyRevealTimer !== void 0) && this.readout;
-	}
-	#keyTarget(key) {
-		if (key === "Home") return this.min;
-		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 taper = this.#taper();
-		if (!taper) return this.#value + steps * step;
-		const next = this.#clamp(taper.value(taper.position(this.#value) + steps / 100));
-		return next === this.#value ? this.#value + Math.sign(steps) * step : next;
-	}
-	#max() {
-		return Math.max(this.min, this.max);
-	}
-	#renderDisabled(control) {
-		if (this.isDisabled()) {
-			control.setAttribute("aria-disabled", "true");
-			control.removeAttribute("tabindex");
-			return;
-		}
-		control.removeAttribute("aria-disabled");
-		control.setAttribute("tabindex", "0");
-	}
-	#renderReadout() {
-		const readout = this.#readout;
-		if (!readout || !canPopover || !this.isConnected) return;
-		const isEditing = this.#entry?.isOpen === true;
-		readout.text.hidden = isEditing;
-		if (!isEditing) readout.text.textContent = this.valueText();
-		readout.bubble.togglePopover(isEditing || this.#isValueShown());
-	}
-	#reset() {
-		this.#commit(this.default ?? NaN);
-	}
-	#reveal(drag) {
-		if (drag.isRevealed || this.#drag !== drag) return;
-		drag.isRevealed = true;
-		this.#renderReadout();
-	}
-	#revealForKeys() {
-		clearTimeout(this.#keyRevealTimer);
-		this.#keyRevealTimer = setTimeout(() => {
-			this.#hideForKeys();
-		}, keyRevealMs);
-		this.#renderReadout();
-	}
-	#taper() {
-		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);
-	}
-	#write(next) {
-		if (!Number.isFinite(next)) return;
-		this.#isDirty = true;
-		const clamped = this.#clamp(next);
-		if (clamped === this.#value) return;
-		this.#value = clamped;
-		this.render();
-	}
-};
-
-//#endregion
-export { SonicRangeElement };

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

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

package/dist/dev/define/key.js

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

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

@@ -1 +0,0 @@
-{"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/dev/elements/key.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"key.js","names":[],"sources":["../../../src/elements/key.ts"],"sourcesContent":["import { SonicFormElement } from '#elements/form-element.ts';\nimport { copyNode } from '#lib/copy-node.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 SonicFormElement {\n\tstatic override readonly observedAttributes = [\n\t\t...SonicFormElement.observedAttributes,\n\t\t'momentary',\n\t\t'pressed',\n\t\t'toggle',\n\t\t'value',\n\t];\n\n\t// The `pressed` attribute, as `defaultChecked` holds a checkbox's `checked` attribute\n\tget defaultPressed(): boolean {\n\t\treturn this.hasAttribute('pressed');\n\t}\n\n\tset defaultPressed(isPressed: boolean) {\n\t\tthis.reflect('pressed', isPressed);\n\t}\n\n\tget momentary(): boolean {\n\t\treturn this.hasAttribute('momentary');\n\t}\n\n\tset momentary(isMomentary: boolean) {\n\t\tthis.reflect('momentary', isMomentary);\n\t}\n\n\t// The live state, which never writes the attribute, as `value` on the range\n\tget pressed(): boolean {\n\t\treturn this.#isDirty ? this.#pressed : this.defaultPressed;\n\t}\n\n\tset pressed(isPressed: boolean | undefined) {\n\t\tthis.#isDirty = true;\n\t\tthis.#pressed = isPressed === true;\n\t\tthis.render();\n\t}\n\n\tget toggle(): boolean {\n\t\treturn this.hasAttribute('toggle');\n\t}\n\n\tset toggle(isToggle: boolean) {\n\t\tthis.reflect('toggle', isToggle);\n\t}\n\n\t// What a pressed toggle submits, reading `on` while unset as a checkbox does\n\tget value(): string {\n\t\treturn this.getAttribute('value') ?? 'on';\n\t}\n\n\tset value(value: string | undefined) {\n\t\tthis.reflect('value', value);\n\t}\n\n\t#holder: number | string | undefined;\n\n\t// Re-read from the attribute until a press or a write\n\t// An attribute write clears it, so a framework driving `pressed` keeps control\n\t#isDirty = false;\n\n\treadonly #key = renderKey();\n\n\t#pressed = false;\n\n\tattributeChangedCallback(name: string): void {\n\t\tif (name === 'pressed') this.#isDirty = false;\n\t\tif (name === 'disabled' && this.isDisabled()) this.#release();\n\t\tthis.render();\n\t}\n\n\t// Back to the `pressed` attribute, as a checkbox resets to `checked`\n\toverride formResetCallback(): void {\n\t\tthis.attributeChangedCallback('pressed');\n\t}\n\n\t// As a checkbox's label toggles it\n\tprotected override activate(): void {\n\t\tthis.#key.click();\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.upgradeProperties('defaultPressed', 'momentary', 'toggle', 'pressed', 'value');\n\t\tthis.mirrorChildren(\n\t\t\t{\n\t\t\t\tcontrol: key,\n\t\t\t\tcopy: (originals) => {\n\t\t\t\t\tcap.replaceChildren(...originals.map((original) => copyNode(original)));\n\t\t\t\t},\n\t\t\t},\n\t\t\tsignal,\n\t\t);\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.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\tprotected override focusTarget(): HTMLElement {\n\t\treturn this.#key;\n\t}\n\n\tprotected render(): void {\n\t\tconst key = this.#key;\n\n\t\tkey.disabled = this.isDisabled();\n\t\tkey.removeAttribute('aria-pressed');\n\t\tif (this.toggle) key.setAttribute('aria-pressed', String(this.pressed));\n\t\tthis.toggleState('pressed', this.pressed);\n\t\tthis.forwardNaming(key, true);\n\n\t\t// eslint-disable-next-line unicorn/no-null -- `null` submits nothing\n\t\tconst submitted = this.toggle && this.pressed ? this.value : null;\n\n\t\t// The state restores an unpressed toggle too\n\t\tthis.writeFormValue(submitted, String(this.pressed));\n\t}\n\n\tprotected restoreState(state: string): void {\n\t\tif (this.toggle) this.pressed = state === 'true';\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.isDisabled() || 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.momentary && !this.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"],"mappings":";;;;;AAUA,MAAM,YAAY,SACN;;IAGX,iBACD;AAEA,MAAM,2BAAW,IAAI,IAAI,CAAC,KAAK,OAAO,CAAC;AAEvC,IAAa,WAAb,cAA8B,iBAAiB;CAC9C,OAAyB,qBAAqB;EAC7C,GAAG,iBAAiB;EACpB;EACA;EACA;EACA;CACD;CAGA,IAAI,iBAA0B;EAC7B,OAAO,KAAK,aAAa,SAAS;CACnC;CAEA,IAAI,eAAe,WAAoB;EACtC,KAAK,QAAQ,WAAW,SAAS;CAClC;CAEA,IAAI,YAAqB;EACxB,OAAO,KAAK,aAAa,WAAW;CACrC;CAEA,IAAI,UAAU,aAAsB;EACnC,KAAK,QAAQ,aAAa,WAAW;CACtC;CAGA,IAAI,UAAmB;EACtB,OAAO,KAAK,WAAW,KAAK,WAAW,KAAK;CAC7C;CAEA,IAAI,QAAQ,WAAgC;EAC3C,KAAK,WAAW;EAChB,KAAK,WAAW,cAAc;EAC9B,KAAK,OAAO;CACb;CAEA,IAAI,SAAkB;EACrB,OAAO,KAAK,aAAa,QAAQ;CAClC;CAEA,IAAI,OAAO,UAAmB;EAC7B,KAAK,QAAQ,UAAU,QAAQ;CAChC;CAGA,IAAI,QAAgB;EACnB,OAAO,KAAK,aAAa,OAAO,KAAK;CACtC;CAEA,IAAI,MAAM,OAA2B;EACpC,KAAK,QAAQ,SAAS,KAAK;CAC5B;CAEA;CAIA,WAAW;CAEX,AAAS,OAAO,UAAU;CAE1B,WAAW;CAEX,yBAAyB,MAAoB;EAC5C,IAAI,SAAS,WAAW,KAAK,WAAW;EACxC,IAAI,SAAS,cAAc,KAAK,WAAW,GAAG,KAAK,SAAS;EAC5D,KAAK,OAAO;CACb;CAGA,AAAS,oBAA0B;EAClC,KAAK,yBAAyB,SAAS;CACxC;CAGA,AAAmB,WAAiB;EACnC,KAAK,KAAK,MAAM;CACjB;CAEA,AAAU,QAAQ,QAA2B;EAC5C,MAAM,MAAM,KAAK;EACjB,MAAM,MAAM,aAAa,KAAK,kBAAkB,eAAe;EAE/D,KAAK,kBAAkB,kBAAkB,aAAa,UAAU,WAAW,OAAO;EAClF,KAAK,eACJ;GACC,SAAS;GACT,OAAO,cAAc;IACpB,IAAI,gBAAgB,GAAG,UAAU,KAAK,aAAa,SAAS,QAAQ,CAAC,CAAC;GACvE;EACD,GACA,MACD;EACA,KAAK,OAAO;EACZ,KAAK,YAAY,KAAK,SAAS;EAC/B,OAAO,iBACN,eACM;GACL,KAAK,SAAS;EACf,GACA,EAAE,MAAM,KAAK,CACd;EAEA,IAAI,iBACH,eACM;GACL,IAAI,CAAC,KAAK,QAAQ;GAElB,KAAK,UAAU,CAAC,KAAK;GACrB,KAAK,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC;EAC1D,GACA,EAAE,OAAO,CACV;EACA,KAAK,eAAe,KAAK,MAAM;CAChC;CAEA,AAAmB,cAA2B;EAC7C,OAAO,KAAK;CACb;CAEA,AAAU,SAAe;EACxB,MAAM,MAAM,KAAK;EAEjB,IAAI,WAAW,KAAK,WAAW;EAC/B,IAAI,gBAAgB,cAAc;EAClC,IAAI,KAAK,QAAQ,IAAI,aAAa,gBAAgB,OAAO,KAAK,OAAO,CAAC;EACtE,KAAK,YAAY,WAAW,KAAK,OAAO;EACxC,KAAK,cAAc,KAAK,IAAI;EAG5B,MAAM,YAAY,KAAK,UAAU,KAAK,UAAU,KAAK,QAAQ;EAG7D,KAAK,eAAe,WAAW,OAAO,KAAK,OAAO,CAAC;CACpD;CAEA,AAAU,aAAa,OAAqB;EAC3C,IAAI,KAAK,QAAQ,KAAK,UAAU,UAAU;CAC3C;CAGA,eAAe,KAAwB,QAA2B;EACjE,MAAM,kBAAkB,UAA8B;GACrD,IAAI,MAAM,cAAc,KAAK,SAAS,KAAK,SAAS;EACrD;EAEA,IAAI,iBACH,gBACC,UAAU;GACV,IAAI,MAAM,WAAW,KAAK,CAAC,KAAK,aAAa,GAAG;GAEhD,IAAI,kBAAkB,MAAM,SAAS;GACrC,KAAK,MAAM,MAAM,SAAS;EAC3B,GACA,EAAE,OAAO,CACV;EACA,IAAI,iBAAiB,sBAAsB,gBAAgB,EAAE,OAAO,CAAC;EACrE,IAAI,iBAAiB,iBAAiB,gBAAgB,EAAE,OAAO,CAAC;EAChE,IAAI,iBAAiB,aAAa,gBAAgB,EAAE,OAAO,CAAC;EAC5D,IAAI,iBACH,YACC,UAAU;GACV,IAAI,MAAM,UAAU,CAAC,SAAS,IAAI,MAAM,GAAG,KAAK,CAAC,KAAK,aAAa,GAAG;GAEtE,KAAK,MAAM,MAAM,GAAG;EACrB,GACA,EAAE,OAAO,CACV;EACA,IAAI,iBACH,UACC,UAAU;GACV,IAAI,MAAM,QAAQ,KAAK,SAAS,KAAK,SAAS;EAC/C,GACA,EAAE,OAAO,CACV;EAEA,IAAI,iBACH,cACM;GACL,IAAI,OAAO,KAAK,YAAY,UAAU,KAAK,SAAS;EACrD,GACA,EAAE,OAAO,CACV;CACD;CAEA,MAAM,QAA+B;EACpC,IAAI,KAAK,WAAW,KAAK,KAAK,YAAY,QAAW;EAErD,KAAK,UAAU;EACf,KAAK,UAAU;EACf,KAAK,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC;CAC1D;CAEA,eAAwB;EACvB,OAAO,KAAK,aAAa,CAAC,KAAK;CAChC;CAEA,WAAiB;EAChB,IAAI,KAAK,YAAY,QAAW;EAEhC,KAAK,UAAU;EACf,KAAK,UAAU;EACf,KAAK,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC;CAC1D;AACD"}

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

@@ -1,56 +0,0 @@
-import { SonicFormElement } from "./form-element.js";
-//#region src/elements/range-element.d.ts
-export interface RangeAxis {
-  position: (event: PointerEvent) => number;
-  travelPx: number;
-}
-export declare abstract class SonicRangeElement extends SonicFormElement {
-  #private;
-  static readonly observedAttributes: string[];
-  get default(): number | undefined;
-  set default(value: number | undefined);
-  get dimmed(): boolean;
-  set dimmed(isDimmed: boolean);
-  get doublePress(): 'reset' | 'type';
-  set doublePress(gesture: 'reset' | 'type' | undefined);
-  get formatValue(): ((value: number) => string) | undefined;
-  set formatValue(format: ((value: number) => string) | undefined);
-  get max(): number;
-  set max(value: number | undefined);
-  get midpoint(): number | undefined;
-  set midpoint(value: number | undefined);
-  get min(): number;
-  set min(value: number | undefined);
-  get notched(): boolean;
-  set notched(isNotched: boolean);
-  get origin(): number | undefined;
-  set origin(value: number | undefined);
-  get parseValue(): ((text: string) => number) | undefined;
-  set parseValue(parse: ((text: string) => number) | undefined);
-  get readout(): boolean;
-  set readout(isShown: boolean);
-  get step(): number;
-  set step(value: number | undefined);
-  get taper(): 'linear' | 'log';
-  set taper(curve: 'linear' | 'log' | 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 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