@xsynaptic/sonic-ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,153 @@
+import { attachSlot } from "../lib/render.js";
+import { writeAttribute } from "../lib/write-attribute.js";
+
+//#region src/elements/sonic-element.ts
+const namingAttributes = [
+	"aria-describedby",
+	"aria-label",
+	"aria-labelledby"
+];
+function writeLabelledBy(target, labels) {
+	const current = target.ariaLabelledByElements;
+	if (current?.length === labels.length && labels.every((label, index) => label === current[index])) return;
+	target.ariaLabelledByElements = labels;
+}
+var SonicElement = class extends HTMLElement {
+	static observedAttributes = [...namingAttributes, "disabled"];
+	get disabled() {
+		return this.hasAttribute("disabled");
+	}
+	set disabled(isDisabled) {
+		this.reflect("disabled", isDisabled);
+	}
+	internals = "attachInternals" in HTMLElement.prototype ? this.attachInternals() : void 0;
+	#connection;
+	#slot;
+	blur() {
+		this.#focused()?.blur();
+	}
+	connectedCallback() {
+		this.upgradeProperties("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;
+		});
+	}
+	focus(options) {
+		const target = this.focusTarget();
+		if (!target) {
+			super.focus(options);
+			return;
+		}
+		if (!this.isDisabled() && !this.#focused()) target.focus(options);
+	}
+	appendOnce(child) {
+		if (child.parentNode !== this) this.append(child);
+	}
+	checkStyles(control, sheet) {}
+	focusTarget() {}
+	forwardNaming(target, isNamed) {
+		const labels = isNamed ? this.namingLabels() : [];
+		for (const name of namingAttributes) {
+			if (name === "aria-labelledby" && labels.length > 0) continue;
+			const value = this.getAttribute(name);
+			writeAttribute(target, name, isNamed && value !== null ? value : void 0);
+		}
+		if (labels.length > 0) writeLabelledBy(target, labels);
+	}
+	isDisabled() {
+		return this.disabled || this.matches(":disabled");
+	}
+	mirrorChildren({ control, copy, isCopied = () => true }, signal) {
+		const slot = this.#slot ?? attachSlot(this);
+		this.#slot = slot;
+		const mirror = () => {
+			const children = [...this.childNodes].filter((child) => child !== control);
+			copy(children.filter((child) => isCopied(child)));
+			this.appendOnce(control);
+			slot.assign(...children.filter((child) => (child instanceof Element || child instanceof Text) && !isCopied(child)), control);
+		};
+		const observer = new MutationObserver((records) => {
+			if (records.some((record) => this.#isCopiedChange(record, control, isCopied))) mirror();
+		});
+		mirror();
+		observer.observe(this, {
+			attributes: true,
+			characterData: true,
+			childList: true,
+			subtree: true
+		});
+		signal.addEventListener("abort", () => {
+			observer.disconnect();
+		}, { once: true });
+	}
+	namingLabels() {
+		return [];
+	}
+	numberAttribute(name, fallback) {
+		const attribute = this.getAttribute(name);
+		if (attribute === null) return fallback;
+		const parsed = Number(attribute);
+		return Number.isFinite(parsed) ? parsed : fallback;
+	}
+	optionalNumberAttribute(name) {
+		const value = this.numberAttribute(name, NaN);
+		return Number.isNaN(value) ? void 0 : value;
+	}
+	reflect(name, value) {
+		if (value === true) {
+			this.setAttribute(name, "");
+			return;
+		}
+		writeAttribute(this, name, value === false || value === null ? void 0 : value?.toString());
+	}
+	toggleState(state, isOn) {
+		if (isOn) this.internals?.states.add(state);
+		else this.internals?.states.delete(state);
+	}
+	upgradeProperties(...names) {
+		for (const name of names) {
+			if (!Object.hasOwn(this, name)) continue;
+			const value = this[name];
+			Reflect.deleteProperty(this, name);
+			this[name] = value;
+		}
+	}
+	#childHolding(node) {
+		let current = node;
+		while (current && current.parentNode !== this) current = current.parentNode;
+		return current ?? void 0;
+	}
+	#focused() {
+		const root = this.getRootNode();
+		const active = root instanceof ShadowRoot ? root.activeElement : this.ownerDocument.activeElement;
+		return active instanceof HTMLElement && this.contains(active) ? active : void 0;
+	}
+	#isCopiedChange(record, control, isCopied) {
+		if (record.target === this) {
+			if (record.type === "attributes") return false;
+			return record.removedNodes.length > 0 || [...record.addedNodes].some((node) => node !== control);
+		}
+		const child = this.#childHolding(record.target);
+		if (child === void 0 || child === control) return false;
+		return isCopied(child) || record.type === "attributes" && record.target === child;
+	}
+};
+
+//#endregion
+export { SonicElement };

package/dist/{index.js → default/index.js}

@@ -3,5 +3,6 @@ import { SonicKey } from "./elements/key.js";
 import { SonicMeter } from "./elements/meter.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 };
+export { SonicDial, SonicKey, SonicMeter, SonicSegmented, SonicSlider, formatPercent, parsePercent };

package/dist/default/lib/copy-node.js

@@ -0,0 +1,30 @@
+//#region src/lib/copy-node.ts
+const copyPrefix = "sonic-copy-";
+const idListAttributes = /* @__PURE__ */ new Set(["aria-describedby", "aria-labelledby"]);
+const hrefAttributes = /* @__PURE__ */ new Set(["href", "xlink:href"]);
+const urlReference = /url\(\s*(['"]?)#([^'")\s]+)\1\s*\)/g;
+function rewriteReferences(name, value, ids) {
+	if (hrefAttributes.has(name)) return value.startsWith("#") && ids.has(value.slice(1)) ? `#${copyPrefix}${value.slice(1)}` : value;
+	if (idListAttributes.has(name)) return value.split(/\s+/).map((id) => ids.has(id) ? copyPrefix + id : id).join(" ");
+	return value.replaceAll(urlReference, (reference, quote, id) => ids.has(id) ? `url(${quote}#${copyPrefix}${id}${quote})` : reference);
+}
+function prefixIds(element, ids) {
+	if (element.id !== "") element.id = copyPrefix + element.id;
+	for (const attribute of element.attributes) {
+		if (attribute.name === "id") continue;
+		const value = rewriteReferences(attribute.name, attribute.value, ids);
+		if (value !== attribute.value) attribute.value = value;
+	}
+}
+function copyNode(node) {
+	const copy = node.cloneNode(true);
+	if (!(copy instanceof Element)) return copy;
+	const elements = [copy, ...copy.querySelectorAll("*")];
+	const ids = new Set(elements.map((element) => element.id).filter((id) => id !== ""));
+	if (ids.size === 0) return copy;
+	for (const element of elements) prefixIds(element, ids);
+	return copy;
+}
+
+//#endregion
+export { copyNode };

package/dist/default/lib/percent.js

@@ -0,0 +1,12 @@
+//#region src/lib/percent.ts
+function formatPercent(value) {
+	return `${String(Math.round(value * 100))}%`;
+}
+function parsePercent(text) {
+	const digits = text.trim().replace(/\s*%$/, "");
+	if (digits === "") return NaN;
+	return Number(digits) / 100;
+}
+
+//#endregion
+export { formatPercent, parsePercent };

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

@@ -0,0 +1,8 @@
+//#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 };

package/dist/{lib → default/lib}/render.js

@@ -13,7 +13,14 @@ function template(html, root) {
 		return clone;
 	};
 }
+function attachSlot(host) {
+	const slot = document.createElement("slot");
+	host.attachShadow({
+		mode: "open",
+		slotAssignment: "manual"
+	}).append(slot);
+	return slot;
+}
 
 //#endregion
-export { requireChild, template };
-//# sourceMappingURL=render.js.map
+export { attachSlot, requireChild, template };

package/dist/default/lib/taper.js

@@ -0,0 +1,32 @@
+//#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 };

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

@@ -0,0 +1,11 @@
+//#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 };

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

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

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

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

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

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

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

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

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

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

package/dist/dev/define.js

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

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

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

package/dist/{elements → dev/elements}/dial.d.ts

@@ -8,7 +8,11 @@ declare global {
 export declare class SonicDial extends SonicRangeElement {
   #private;
   static readonly observedAttributes: string[];
+  get modulation(): number;
+  set modulation(amount: number | undefined);
+  connectedCallback(): void;
   protected connect(signal: AbortSignal): void;
+  protected focusTarget(): HTMLElement;
   protected render(): void;
 }
 //#endregion

package/dist/dev/elements/dial.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"dial.js","names":[],"sources":["../../../src/elements/dial.ts"],"sourcesContent":["import { SonicRangeElement } from '#elements/range-element.ts';\nimport { readPxProperty } from '#lib/read-px-property.ts';\nimport { template } from '#lib/render.ts';\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sonic-dial': SonicDial;\n\t}\n}\n\nconst renderDial = template(\n\t/* HTML */ `\n\t\t<div class=\"sonic-dial\" role=\"slider\" tabindex=\"0\">\n\t\t\t<div class=\"sonic-dial-notches\"></div>\n\t\t\t<div class=\"sonic-dial-ring\"></div>\n\t\t\t<div class=\"sonic-dial-modulation\"></div>\n\t\t\t<div class=\"sonic-dial-cap\"></div>\n\t\t\t<div class=\"sonic-dial-pointer\"></div>\n\t\t\t<div class=\"sonic-dial-readout\" popover=\"manual\">\n\t\t\t\t<span></span>\n\t\t\t\t<input\n\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\tclass=\"sonic-dial-entry\"\n\t\t\t\t\tenterkeyhint=\"done\"\n\t\t\t\t\thidden\n\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tHTMLDivElement,\n);\n\nconst fallbackTravelPx = 160;\n\nexport class SonicDial extends SonicRangeElement {\n\tstatic override readonly observedAttributes = [\n\t\t...SonicRangeElement.observedAttributes,\n\t\t'modulation',\n\t];\n\n\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"}

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

@@ -0,0 +1,22 @@
+import { SonicElement } from "./sonic-element.js";
+//#region src/elements/form-element.d.ts
+export declare abstract class SonicFormElement extends SonicElement {
+  static readonly formAssociated = true;
+  get form(): HTMLFormElement | null;
+  get labels(): NodeList | null;
+  get name(): string;
+  set name(value: string | undefined);
+  constructor();
+  abstract attributeChangedCallback(name: string): void;
+  connectedCallback(): void;
+  formDisabledCallback(): void;
+  formResetCallback(): void;
+  formStateRestoreCallback(state: File | FormData | null | string): void;
+  protected activate(): void;
+  protected namingLabels(): Array<Element>;
+  protected abstract render(): void;
+  protected abstract restoreState(state: string): void;
+  protected writeFormValue(value: null | string, state: string): void;
+}
+//#endregion
+//# sourceMappingURL=form-element.d.ts.map

package/dist/dev/elements/form-element.js

@@ -0,0 +1,57 @@
+import { SonicElement } from "./sonic-element.js";
+
+//#region src/elements/form-element.ts
+var SonicFormElement = class extends SonicElement {
+	static formAssociated = true;
+	get form() {
+		return this.internals?.form ?? null;
+	}
+	get labels() {
+		return this.internals?.labels ?? null;
+	}
+	get name() {
+		return this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.reflect("name", value);
+	}
+	constructor() {
+		super();
+		if (this.internals) this.internals.role = "none";
+		this.addEventListener("click", (event) => {
+			if (event.target === this) this.activate();
+		});
+		this.addEventListener("focusin", () => {
+			this.render();
+		});
+	}
+	connectedCallback() {
+		this.upgradeProperties("name");
+		super.connectedCallback();
+	}
+	formDisabledCallback() {
+		this.attributeChangedCallback("disabled");
+	}
+	formResetCallback() {
+		this.attributeChangedCallback("value");
+	}
+	formStateRestoreCallback(state) {
+		const prefix = `${this.localName}:`;
+		if (typeof state === "string" && state.startsWith(prefix)) this.restoreState(state.slice(prefix.length));
+	}
+	activate() {
+		this.focus();
+	}
+	namingLabels() {
+		const internals = this.internals;
+		if (!internals || this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby")) return [];
+		return [...internals.labels].filter((label) => label instanceof Element);
+	}
+	writeFormValue(value, state) {
+		this.internals?.setFormValue(value, `${this.localName}:${state}`);
+	}
+};
+
+//#endregion
+export { SonicFormElement };
+//# sourceMappingURL=form-element.js.map

package/dist/dev/elements/form-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-element.js","names":[],"sources":["../../../src/elements/form-element.ts"],"sourcesContent":["import { SonicElement } from '#elements/sonic-element.ts';\n\n// A `<label>` names and clicks the host, which has no role and no box, so both pass to the control\nexport abstract class SonicFormElement extends SonicElement {\n\tstatic readonly formAssociated = true;\n\n\tget form(): HTMLFormElement | null {\n\t\t// eslint-disable-next-line unicorn/no-null -- as on native inputs\n\t\treturn this.internals?.form ?? null;\n\t}\n\n\tget labels(): NodeList | null {\n\t\t// eslint-disable-next-line unicorn/no-null -- as on native inputs\n\t\treturn this.internals?.labels ?? null;\n\t}\n\n\tget name(): string {\n\t\treturn this.getAttribute('name') ?? '';\n\t}\n\n\tset name(value: string | undefined) {\n\t\tthis.reflect('name', value);\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Otherwise the host takes the label's name and shows as a named generic beside the control\n\t\tif (this.internals) this.internals.role = 'none';\n\n\t\t// Only a label's click targets the host itself; a click inside the control bubbles here from its own target\n\t\tthis.addEventListener('click', (event) => {\n\t\t\tif (event.target === this) this.activate();\n\t\t});\n\n\t\t// No event fires when a label arrives, so focus picks it up\n\t\tthis.addEventListener('focusin', () => {\n\t\t\tthis.render();\n\t\t});\n\t}\n\n\tabstract attributeChangedCallback(name: string): void;\n\n\toverride connectedCallback(): void {\n\t\tthis.upgradeProperties('name');\n\t\tsuper.connectedCallback();\n\t}\n\n\t// Never writes the attribute, or re-enabling the fieldset would leave the control disabled\n\tformDisabledCallback(): void {\n\t\tthis.attributeChangedCallback('disabled');\n\t}\n\n\t// Back to the `value` attribute; the key overrides it to return to `pressed`\n\tformResetCallback(): void {\n\t\tthis.attributeChangedCallback('value');\n\t}\n\n\t// Firefox hands a restored state to the wrong control when tags upgrade out of document order\n\t// Each state names its tag, and a control drops one another tag wrote\n\tformStateRestoreCallback(state: File | FormData | null | string): void {\n\t\tconst prefix = `${this.localName}:`;\n\n\t\tif (typeof state === 'string' && state.startsWith(prefix)) {\n\t\t\tthis.restoreState(state.slice(prefix.length));\n\t\t}\n\t}\n\n\tprotected activate(): void {\n\t\tthis.focus();\n\t}\n\n\t// An author's `aria-label` or `aria-labelledby` wins over a label, as on native inputs\n\tprotected override namingLabels(): Array<Element> {\n\t\tconst internals = this.internals;\n\t\tif (!internals || this.hasAttribute('aria-label') || this.hasAttribute('aria-labelledby')) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn [...internals.labels].filter((label) => label instanceof Element);\n\t}\n\n\tprotected abstract render(): void;\n\n\tprotected abstract restoreState(state: string): void;\n\n\tprotected writeFormValue(value: null | string, state: string): void {\n\t\tthis.internals?.setFormValue(value, `${this.localName}:${state}`);\n\t}\n}\n"],"mappings":";;;AAGA,IAAsB,mBAAtB,cAA+C,aAAa;CAC3D,OAAgB,iBAAiB;CAEjC,IAAI,OAA+B;EAElC,OAAO,KAAK,WAAW,QAAQ;CAChC;CAEA,IAAI,SAA0B;EAE7B,OAAO,KAAK,WAAW,UAAU;CAClC;CAEA,IAAI,OAAe;EAClB,OAAO,KAAK,aAAa,MAAM,KAAK;CACrC;CAEA,IAAI,KAAK,OAA2B;EACnC,KAAK,QAAQ,QAAQ,KAAK;CAC3B;CAEA,cAAc;EACb,MAAM;EAGN,IAAI,KAAK,WAAW,KAAK,UAAU,OAAO;EAG1C,KAAK,iBAAiB,UAAU,UAAU;GACzC,IAAI,MAAM,WAAW,MAAM,KAAK,SAAS;EAC1C,CAAC;EAGD,KAAK,iBAAiB,iBAAiB;GACtC,KAAK,OAAO;EACb,CAAC;CACF;CAIA,AAAS,oBAA0B;EAClC,KAAK,kBAAkB,MAAM;EAC7B,MAAM,kBAAkB;CACzB;CAGA,uBAA6B;EAC5B,KAAK,yBAAyB,UAAU;CACzC;CAGA,oBAA0B;EACzB,KAAK,yBAAyB,OAAO;CACtC;CAIA,yBAAyB,OAA8C;EACtE,MAAM,SAAS,GAAG,KAAK,UAAU;EAEjC,IAAI,OAAO,UAAU,YAAY,MAAM,WAAW,MAAM,GACvD,KAAK,aAAa,MAAM,MAAM,OAAO,MAAM,CAAC;CAE9C;CAEA,AAAU,WAAiB;EAC1B,KAAK,MAAM;CACZ;CAGA,AAAmB,eAA+B;EACjD,MAAM,YAAY,KAAK;EACvB,IAAI,CAAC,aAAa,KAAK,aAAa,YAAY,KAAK,KAAK,aAAa,iBAAiB,GACvF,OAAO,CAAC;EAGT,OAAO,CAAC,GAAG,UAAU,MAAM,CAAC,CAAC,QAAQ,UAAU,iBAAiB,OAAO;CACxE;CAMA,AAAU,eAAe,OAAsB,OAAqB;EACnE,KAAK,WAAW,aAAa,OAAO,GAAG,KAAK,UAAU,GAAG,OAAO;CACjE;AACD"}

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

@@ -0,0 +1,30 @@
+import { SonicFormElement } from "./form-element.js";
+//#region src/elements/key.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    'sonic-key': SonicKey;
+  }
+}
+export declare class SonicKey extends SonicFormElement {
+  #private;
+  static readonly observedAttributes: string[];
+  get defaultPressed(): boolean;
+  set defaultPressed(isPressed: boolean);
+  get momentary(): boolean;
+  set momentary(isMomentary: boolean);
+  get pressed(): boolean;
+  set pressed(isPressed: boolean | undefined);
+  get toggle(): boolean;
+  set toggle(isToggle: boolean);
+  get value(): string;
+  set value(value: string | undefined);
+  attributeChangedCallback(name: string): void;
+  formResetCallback(): void;
+  protected activate(): void;
+  protected connect(signal: AbortSignal): void;
+  protected focusTarget(): HTMLElement;
+  protected render(): void;
+  protected restoreState(state: string): void;
+}
+//#endregion
+//# sourceMappingURL=key.d.ts.map