@xsynaptic/sonic-ui 0.3.0 → 0.5.0

package/dist/dev/elements/radio-group.js

@@ -0,0 +1,186 @@
+import { placeChildren } from "../lib/render.js";
+import { SonicFormElement } from "./form-element.js";
+import { copyNode } from "../lib/copy-node.js";
+
+//#region src/elements/radio-group.ts
+const keySteps = /* @__PURE__ */ new Map([
+	["ArrowDown", 1],
+	["ArrowLeft", -1],
+	["ArrowRight", 1],
+	["ArrowUp", -1]
+]);
+function isUnder(option, x, y) {
+	const box = option.getBoundingClientRect();
+	return x >= box.left && x < box.right && y >= box.top && y < box.bottom;
+}
+function optionValue(option) {
+	return option.querySelector("[data-sonic-value]")?.dataset.sonicValue;
+}
+var SonicRadioGroupElement = class extends SonicFormElement {
+	static observedAttributes = [...SonicFormElement.observedAttributes, "value"];
+	get value() {
+		return this.#value;
+	}
+	set value(next) {
+		if (next === this.#value) return;
+		this.#value = next;
+		this.render();
+	}
+	#press;
+	#value = "";
+	attributeChangedCallback(name) {
+		if (name === "value") this.#value = this.getAttribute("value") ?? "";
+		this.render();
+	}
+	chooseByClick(option) {
+		this.select(option);
+	}
+	chooseByKey(option, _event) {
+		this.select(option);
+		option.focus();
+	}
+	claimPress(_option, _event) {
+		return false;
+	}
+	connect(signal) {
+		const group = this.group;
+		this.upgradeProperties("value");
+		this.mirrorChildren({
+			control: group,
+			copy: copyNode,
+			isCopied: (child) => child instanceof Element && child.matches("[data-sonic-value]"),
+			place: (copies) => {
+				this.#copyOptions(copies);
+			}
+		}, signal);
+		group.addEventListener("click", (event) => {
+			if (event instanceof PointerEvent && event.pointerType !== "") return;
+			const option = this.optionOf(event.target);
+			if (option) this.chooseByClick(option);
+		}, { signal });
+		this.#bindPress(group, signal);
+		group.addEventListener("keydown", (event) => {
+			if (event.defaultPrevented) return;
+			const option = this.optionOf(event.target);
+			const next = option && this.#keyTarget(option, event.key);
+			if (!next) return;
+			event.preventDefault();
+			this.chooseByKey(next, event);
+		}, { signal });
+	}
+	focusTarget() {
+		return this.options().find((option) => option.tabIndex === 0);
+	}
+	isWrapping() {
+		return true;
+	}
+	optionOf(target) {
+		if (!(target instanceof Element)) return void 0;
+		const option = target.closest("[role=\"radio\"]");
+		return option instanceof HTMLButtonElement && option.parentElement === this.group ? option : void 0;
+	}
+	options() {
+		return [...this.group.children].filter((child) => child instanceof HTMLButtonElement && child.getAttribute("role") === "radio");
+	}
+	releaseTarget(option) {
+		return option;
+	}
+	render() {
+		const options = this.options();
+		const checked = options.find((option) => optionValue(option) === this.#value);
+		const focusable = checked ?? options[0];
+		for (const option of options) {
+			option.disabled = this.isDisabled();
+			option.setAttribute("aria-checked", String(option === checked));
+			option.tabIndex = option === focusable ? 0 : -1;
+		}
+		this.forwardNaming(this.group, true);
+		this.writeFormValue(checked ? this.#value : null, this.#value);
+	}
+	restoreState(state) {
+		this.value = state;
+	}
+	select(option) {
+		const next = optionValue(option);
+		if (next === void 0 || next === this.#value) return;
+		this.value = next;
+		this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	#bindPress(group, signal) {
+		const isOwn = (event) => event.pointerId === this.#press?.pointerId;
+		const release = (event) => {
+			if (isOwn(event)) this.#hold(void 0);
+		};
+		group.addEventListener("pointerdown", (event) => {
+			const option = this.optionOf(event.target);
+			if (!option || event.button !== 0 || this.isDisabled()) return;
+			if (this.claimPress(option, event)) return;
+			group.setPointerCapture(event.pointerId);
+			this.#hold({
+				option,
+				pointerId: event.pointerId
+			});
+		}, { signal });
+		group.addEventListener("pointermove", (event) => {
+			if (!isOwn(event)) return;
+			this.#hold({
+				option: this.options().find((option) => isUnder(option, event.clientX, event.clientY)),
+				pointerId: event.pointerId
+			});
+		}, { signal });
+		group.addEventListener("pointerup", (event) => {
+			const pressed = isOwn(event) ? this.#press?.option : void 0;
+			release(event);
+			if (!pressed || this.isDisabled()) return;
+			const option = this.releaseTarget(pressed);
+			if (!option) return;
+			this.select(option);
+			if (group.matches(":focus-within")) option.focus();
+		}, { signal });
+		group.addEventListener("pointercancel", release, { signal });
+		group.addEventListener("lostpointercapture", release, { signal });
+		signal.addEventListener("abort", () => {
+			this.#hold(void 0);
+		}, { once: true });
+	}
+	#copyOptions(copies) {
+		const group = this.group;
+		const options = this.options();
+		const focused = this.optionOf(group.querySelector(":scope > :focus"));
+		const focusedValue = focused && optionValue(focused);
+		for (const [index, copy] of copies.entries()) {
+			let option = options[index];
+			if (!option) {
+				option = this.renderOption();
+				group.append(option);
+			}
+			if (option.firstElementChild) placeChildren(option.firstElementChild, [copy]);
+		}
+		for (const option of options.slice(copies.length)) option.remove();
+		this.render();
+		if (focused) this.#refocus(focused, focusedValue);
+	}
+	#hold(press) {
+		this.#press = press;
+		for (const option of this.options()) option.toggleAttribute("data-sonic-pressed", option === press?.option);
+	}
+	#keyTarget(option, key) {
+		const options = this.options();
+		if (key === "Home") return options[0];
+		if (key === "End") return options.at(-1);
+		const step = keySteps.get(key);
+		if (step === void 0) return void 0;
+		const index = options.indexOf(option) + step;
+		if (this.isWrapping()) return options[(index + options.length) % options.length];
+		return options[Math.min(Math.max(index, 0), options.length - 1)];
+	}
+	#refocus(focused, value) {
+		const options = this.options();
+		const next = options.find((option) => optionValue(option) === value) ?? options.find((option) => option.tabIndex === 0);
+		if (next !== focused) next?.focus();
+	}
+};
+
+//#endregion
+export { SonicRadioGroupElement, isUnder, optionValue };
+//# sourceMappingURL=radio-group.js.map

package/dist/dev/elements/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","names":[],"sources":["../../../src/elements/radio-group.ts"],"sourcesContent":["import { SonicFormElement } from '#elements/form-element.ts';\nimport { copyNode } from '#lib/copy-node.ts';\nimport { placeChildren } from '#lib/render.ts';\n\n// RTL is not mirrored\nconst keySteps = new Map([\n\t['ArrowDown', 1],\n\t['ArrowLeft', -1],\n\t['ArrowRight', 1],\n\t['ArrowUp', -1],\n]);\n\ninterface Press {\n\toption: HTMLButtonElement | undefined;\n\tpointerId: number;\n}\n\nexport function isUnder(option: Element, x: number, y: number): boolean {\n\tconst box = option.getBoundingClientRect();\n\n\treturn x >= box.left && x < box.right && y >= box.top && y < box.bottom;\n}\n\nexport function optionValue(option: Element): string | undefined {\n\treturn option.querySelector<HTMLElement | SVGElement>('[data-sonic-value]')?.dataset.sonicValue;\n}\n\nexport abstract class SonicRadioGroupElement extends SonicFormElement {\n\tstatic override readonly observedAttributes = [...SonicFormElement.observedAttributes, 'value'];\n\n\tget value(): string {\n\t\treturn this.#value;\n\t}\n\n\tset value(next: string) {\n\t\tif (next === this.#value) return;\n\n\t\tthis.#value = next;\n\t\tthis.render();\n\t}\n\n\tprotected abstract readonly group: HTMLElement;\n\n\t#press: Press | undefined;\n\n\t#value = '';\n\n\tattributeChangedCallback(name: string): void {\n\t\tif (name === 'value') this.#value = this.getAttribute('value') ?? '';\n\t\tthis.render();\n\t}\n\n\tprotected chooseByClick(option: HTMLButtonElement): void {\n\t\tthis.select(option);\n\t}\n\n\tprotected chooseByKey(option: HTMLButtonElement, _event: KeyboardEvent): void {\n\t\tthis.select(option);\n\t\toption.focus();\n\t}\n\n\tprotected claimPress(_option: HTMLButtonElement, _event: PointerEvent): boolean {\n\t\treturn false;\n\t}\n\n\tprotected connect(signal: AbortSignal): void {\n\t\tconst group = this.group;\n\n\t\tthis.upgradeProperties('value');\n\t\tthis.mirrorChildren(\n\t\t\t{\n\t\t\t\tcontrol: group,\n\t\t\t\tcopy: copyNode,\n\t\t\t\tisCopied: (child) => child instanceof Element && child.matches('[data-sonic-value]'),\n\t\t\t\tplace: (copies) => {\n\t\t\t\t\tthis.#copyOptions(copies);\n\t\t\t\t},\n\t\t\t},\n\t\t\tsignal,\n\t\t);\n\n\t\tgroup.addEventListener(\n\t\t\t'click',\n\t\t\t(event) => {\n\t\t\t\tif (event instanceof PointerEvent && event.pointerType !== '') return;\n\n\t\t\t\tconst option = this.optionOf(event.target);\n\t\t\t\tif (option) this.chooseByClick(option);\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tthis.#bindPress(group, signal);\n\t\tgroup.addEventListener(\n\t\t\t'keydown',\n\t\t\t(event) => {\n\t\t\t\tif (event.defaultPrevented) return;\n\n\t\t\t\tconst option = this.optionOf(event.target);\n\t\t\t\tconst next = option && this.#keyTarget(option, event.key);\n\t\t\t\tif (!next) return;\n\n\t\t\t\tevent.preventDefault();\n\t\t\t\tthis.chooseByKey(next, event);\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t}\n\n\tprotected override focusTarget(): HTMLElement | undefined {\n\t\treturn this.options().find((option) => option.tabIndex === 0);\n\t}\n\n\tprotected isWrapping(): boolean {\n\t\treturn true;\n\t}\n\n\tprotected optionOf(target: EventTarget | null): HTMLButtonElement | undefined {\n\t\tif (!(target instanceof Element)) return undefined;\n\n\t\tconst option = target.closest('[role=\"radio\"]');\n\n\t\treturn option instanceof HTMLButtonElement && option.parentElement === this.group\n\t\t\t? option\n\t\t\t: undefined;\n\t}\n\n\tprotected options(): Array<HTMLButtonElement> {\n\t\treturn [...this.group.children].filter(\n\t\t\t(child): child is HTMLButtonElement =>\n\t\t\t\tchild instanceof HTMLButtonElement && child.getAttribute('role') === 'radio',\n\t\t);\n\t}\n\n\tprotected releaseTarget(option: HTMLButtonElement): HTMLButtonElement | undefined {\n\t\treturn option;\n\t}\n\n\tprotected render(): void {\n\t\tconst options = this.options();\n\t\tconst checked = options.find((option) => optionValue(option) === this.#value);\n\t\tconst focusable = checked ?? options[0];\n\n\t\tfor (const option of options) {\n\t\t\toption.disabled = this.isDisabled();\n\t\t\toption.setAttribute('aria-checked', String(option === checked));\n\t\t\toption.tabIndex = option === focusable ? 0 : -1;\n\t\t}\n\t\tthis.forwardNaming(this.group, true);\n\t\t// eslint-disable-next-line unicorn/no-null -- `null` submits nothing\n\t\tthis.writeFormValue(checked ? this.#value : null, this.#value);\n\t}\n\n\tprotected abstract renderOption(): HTMLButtonElement;\n\n\tprotected restoreState(state: string): void {\n\t\tthis.value = state;\n\t}\n\n\tprotected select(option: HTMLButtonElement): void {\n\t\tconst next = optionValue(option);\n\t\tif (next === undefined || next === this.#value) return;\n\n\t\tthis.value = next;\n\t\tthis.dispatchEvent(new Event('change', { bubbles: true }));\n\t}\n\n\t#bindPress(group: HTMLElement, signal: AbortSignal): void {\n\t\tconst isOwn = (event: PointerEvent): boolean => event.pointerId === this.#press?.pointerId;\n\t\tconst release = (event: PointerEvent): void => {\n\t\t\tif (isOwn(event)) this.#hold(undefined);\n\t\t};\n\n\t\tgroup.addEventListener(\n\t\t\t'pointerdown',\n\t\t\t(event) => {\n\t\t\t\tconst option = this.optionOf(event.target);\n\t\t\t\tif (!option || event.button !== 0 || this.isDisabled()) return;\n\t\t\t\tif (this.claimPress(option, event)) return;\n\n\t\t\t\tgroup.setPointerCapture(event.pointerId);\n\t\t\t\tthis.#hold({ option, pointerId: event.pointerId });\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tgroup.addEventListener(\n\t\t\t'pointermove',\n\t\t\t(event) => {\n\t\t\t\tif (!isOwn(event)) return;\n\n\t\t\t\tthis.#hold({\n\t\t\t\t\toption: this.options().find((option) => isUnder(option, event.clientX, event.clientY)),\n\t\t\t\t\tpointerId: event.pointerId,\n\t\t\t\t});\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tgroup.addEventListener(\n\t\t\t'pointerup',\n\t\t\t(event) => {\n\t\t\t\tconst pressed = isOwn(event) ? this.#press?.option : undefined;\n\n\t\t\t\trelease(event);\n\t\t\t\tif (!pressed || this.isDisabled()) return;\n\n\t\t\t\tconst option = this.releaseTarget(pressed);\n\t\t\t\tif (!option) return;\n\n\t\t\t\tthis.select(option);\n\t\t\t\tif (group.matches(':focus-within')) option.focus();\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tgroup.addEventListener('pointercancel', release, { signal });\n\t\tgroup.addEventListener('lostpointercapture', release, { signal });\n\t\tsignal.addEventListener(\n\t\t\t'abort',\n\t\t\t() => {\n\t\t\t\tthis.#hold(undefined);\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\t}\n\n\t#copyOptions(copies: Array<Node>): void {\n\t\tconst group = this.group;\n\t\tconst options = this.options();\n\t\tconst focused = this.optionOf(group.querySelector(':scope > :focus'));\n\t\tconst focusedValue = focused && optionValue(focused);\n\n\t\tfor (const [index, copy] of copies.entries()) {\n\t\t\tlet option = options[index];\n\t\t\tif (!option) {\n\t\t\t\toption = this.renderOption();\n\t\t\t\tgroup.append(option);\n\t\t\t}\n\n\t\t\tif (option.firstElementChild) placeChildren(option.firstElementChild, [copy]);\n\t\t}\n\t\tfor (const option of options.slice(copies.length)) option.remove();\n\t\tthis.render();\n\t\tif (focused) this.#refocus(focused, focusedValue);\n\t}\n\n\t#hold(press: Press | undefined): void {\n\t\tthis.#press = press;\n\t\tfor (const option of this.options()) {\n\t\t\toption.toggleAttribute('data-sonic-pressed', option === press?.option);\n\t\t}\n\t}\n\n\t#keyTarget(option: HTMLButtonElement, key: string): HTMLButtonElement | undefined {\n\t\tconst options = this.options();\n\n\t\tif (key === 'Home') return options[0];\n\t\tif (key === 'End') return options.at(-1);\n\n\t\tconst step = keySteps.get(key);\n\t\tif (step === undefined) return undefined;\n\n\t\tconst index = options.indexOf(option) + step;\n\t\tif (this.isWrapping()) return options[(index + options.length) % options.length];\n\n\t\treturn options[Math.min(Math.max(index, 0), options.length - 1)];\n\t}\n\n\t#refocus(focused: HTMLButtonElement, value: string | undefined): void {\n\t\tconst options = this.options();\n\t\tconst next =\n\t\t\toptions.find((option) => optionValue(option) === value) ??\n\t\t\toptions.find((option) => option.tabIndex === 0);\n\n\t\tif (next !== focused) next?.focus();\n\t}\n}\n"],"mappings":"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"}

package/dist/dev/elements/readout-claim.js

@@ -0,0 +1,82 @@
+//#region src/elements/readout-claim.ts
+const keyRevealMs = 1e3;
+const revealMs = 250;
+var ReadoutClaim = class {
+	get isRevealed() {
+		return this.#isDragging || this.#keyTimer !== void 0;
+	}
+	#holdTimer;
+	#hover;
+	#isDismissed = false;
+	#isDragging = false;
+	#isEditing = false;
+	#keyTimer;
+	#onLapse;
+	constructor(onLapse) {
+		this.#onLapse = onLapse;
+	}
+	conceal(by) {
+		if (by === "drag") {
+			const wasDragging = this.#isDragging;
+			clearTimeout(this.#holdTimer);
+			this.#isDragging = false;
+			return wasDragging;
+		}
+		clearTimeout(this.#keyTimer);
+		const wasTimed = this.#keyTimer !== void 0;
+		this.#keyTimer = void 0;
+		return wasTimed;
+	}
+	dismiss() {
+		const wasHovered = this.#hover !== void 0;
+		this.#hover = void 0;
+		this.#isDismissed = wasHovered || this.#isDismissed;
+		return wasHovered;
+	}
+	edit(isOpen) {
+		this.#isEditing = isOpen;
+		if (isOpen) this.#hover = void 0;
+	}
+	hover(value) {
+		if (value === void 0) this.#isDismissed = false;
+		if (this.#isDismissed || this.#isEditing || this.isRevealed) return;
+		this.#hover = value;
+	}
+	press(isDown) {
+		this.conceal("drag");
+		if (!isDown) {
+			this.#onLapse();
+			return;
+		}
+		this.#holdTimer = setTimeout(() => {
+			this.reveal("drag");
+			this.#onLapse();
+		}, 250);
+	}
+	reveal(by) {
+		this.#hover = void 0;
+		if (by === "drag") {
+			this.#isDragging = true;
+			return;
+		}
+		clearTimeout(this.#keyTimer);
+		this.#keyTimer = setTimeout(() => {
+			this.#keyTimer = void 0;
+			this.#onLapse();
+		}, keyRevealMs);
+	}
+	shown(current, isReadout) {
+		if (this.#isEditing) return {
+			isOpen: true,
+			value: void 0
+		};
+		return {
+			isOpen: (this.isRevealed || this.#hover !== void 0) && isReadout,
+			value: this.#hover ?? current
+		};
+	}
+};
+
+//#endregion
+export { ReadoutClaim };
+//# sourceMappingURL=readout-claim.js.map

package/dist/dev/elements/readout-claim.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"readout-claim.js","names":[],"sources":["../../../src/elements/readout-claim.ts"],"sourcesContent":["const keyRevealMs = 1000;\n\nexport const revealMs = 250;\n\nexport class ReadoutClaim {\n\tget isRevealed(): boolean {\n\t\treturn this.#isDragging || this.#keyTimer !== undefined;\n\t}\n\n\t#holdTimer: ReturnType<typeof setTimeout> | undefined;\n\n\t#hover: number | undefined;\n\n\t#isDismissed = false;\n\n\t#isDragging = false;\n\n\t#isEditing = false;\n\n\t#keyTimer: ReturnType<typeof setTimeout> | undefined;\n\n\treadonly #onLapse: () => void;\n\n\tconstructor(onLapse: () => void) {\n\t\tthis.#onLapse = onLapse;\n\t}\n\n\tconceal(by: 'drag' | 'keys'): boolean {\n\t\tif (by === 'drag') {\n\t\t\tconst wasDragging = this.#isDragging;\n\n\t\t\tclearTimeout(this.#holdTimer);\n\t\t\tthis.#isDragging = false;\n\n\t\t\treturn wasDragging;\n\t\t}\n\n\t\tclearTimeout(this.#keyTimer);\n\n\t\tconst wasTimed = this.#keyTimer !== undefined;\n\n\t\tthis.#keyTimer = undefined;\n\n\t\treturn wasTimed;\n\t}\n\n\t// Stays dismissed until the hover ends, or the next pointer move would bring it straight back\n\tdismiss(): boolean {\n\t\tconst wasHovered = this.#hover !== undefined;\n\n\t\tthis.#hover = undefined;\n\t\tthis.#isDismissed = wasHovered || this.#isDismissed;\n\n\t\treturn wasHovered;\n\t}\n\n\tedit(isOpen: boolean): void {\n\t\tthis.#isEditing = isOpen;\n\t\tif (isOpen) this.#hover = undefined;\n\t}\n\n\thover(value?: number): void {\n\t\tif (value === undefined) this.#isDismissed = false;\n\t\tif (this.#isDismissed || this.#isEditing || this.isRevealed) return;\n\n\t\tthis.#hover = value;\n\t}\n\n\tpress(isDown: boolean): void {\n\t\tthis.conceal('drag');\n\t\tif (!isDown) {\n\t\t\tthis.#onLapse();\n\t\t\treturn;\n\t\t}\n\n\t\tthis.#holdTimer = setTimeout(() => {\n\t\t\tthis.reveal('drag');\n\t\t\tthis.#onLapse();\n\t\t}, revealMs);\n\t}\n\n\treveal(by: 'drag' | 'keys'): void {\n\t\tthis.#hover = undefined;\n\t\tif (by === 'drag') {\n\t\t\tthis.#isDragging = true;\n\t\t\treturn;\n\t\t}\n\n\t\tclearTimeout(this.#keyTimer);\n\t\tthis.#keyTimer = setTimeout(() => {\n\t\t\tthis.#keyTimer = undefined;\n\t\t\tthis.#onLapse();\n\t\t}, keyRevealMs);\n\t}\n\n\tshown(current: number, isReadout: boolean): { isOpen: boolean; value: number | undefined } {\n\t\tif (this.#isEditing) return { isOpen: true, value: undefined };\n\n\t\tconst isValueShown = this.isRevealed || this.#hover !== undefined;\n\n\t\treturn { isOpen: isValueShown && isReadout, value: this.#hover ?? current };\n\t}\n}\n"],"mappings":";AAAA,MAAM,cAAc;AAEpB,MAAa,WAAW;AAExB,IAAa,eAAb,MAA0B;CACzB,IAAI,aAAsB;EACzB,OAAO,KAAK,eAAe,KAAK,cAAc;CAC/C;CAEA;CAEA;CAEA,eAAe;CAEf,cAAc;CAEd,aAAa;CAEb;CAEA,AAAS;CAET,YAAY,SAAqB;EAChC,KAAK,WAAW;CACjB;CAEA,QAAQ,IAA8B;EACrC,IAAI,OAAO,QAAQ;GAClB,MAAM,cAAc,KAAK;GAEzB,aAAa,KAAK,UAAU;GAC5B,KAAK,cAAc;GAEnB,OAAO;EACR;EAEA,aAAa,KAAK,SAAS;EAE3B,MAAM,WAAW,KAAK,cAAc;EAEpC,KAAK,YAAY;EAEjB,OAAO;CACR;CAGA,UAAmB;EAClB,MAAM,aAAa,KAAK,WAAW;EAEnC,KAAK,SAAS;EACd,KAAK,eAAe,cAAc,KAAK;EAEvC,OAAO;CACR;CAEA,KAAK,QAAuB;EAC3B,KAAK,aAAa;EAClB,IAAI,QAAQ,KAAK,SAAS;CAC3B;CAEA,MAAM,OAAsB;EAC3B,IAAI,UAAU,QAAW,KAAK,eAAe;EAC7C,IAAI,KAAK,gBAAgB,KAAK,cAAc,KAAK,YAAY;EAE7D,KAAK,SAAS;CACf;CAEA,MAAM,QAAuB;EAC5B,KAAK,QAAQ,MAAM;EACnB,IAAI,CAAC,QAAQ;GACZ,KAAK,SAAS;GACd;EACD;EAEA,KAAK,aAAa,iBAAiB;GAClC,KAAK,OAAO,MAAM;GAClB,KAAK,SAAS;EACf,MAAW;CACZ;CAEA,OAAO,IAA2B;EACjC,KAAK,SAAS;EACd,IAAI,OAAO,QAAQ;GAClB,KAAK,cAAc;GACnB;EACD;EAEA,aAAa,KAAK,SAAS;EAC3B,KAAK,YAAY,iBAAiB;GACjC,KAAK,YAAY;GACjB,KAAK,SAAS;EACf,GAAG,WAAW;CACf;CAEA,MAAM,SAAiB,WAAoE;EAC1F,IAAI,KAAK,YAAY,OAAO;GAAE,QAAQ;GAAM,OAAO;EAAU;EAI7D,OAAO;GAAE,SAFY,KAAK,cAAc,KAAK,WAAW,WAEvB;GAAW,OAAO,KAAK,UAAU;EAAQ;CAC3E;AACD"}

package/dist/dev/elements/readout.js

@@ -0,0 +1,36 @@
+import { requireChild } from "../lib/render.js";
+
+//#region src/elements/readout.ts
+const canPopover = "togglePopover" in HTMLElement.prototype;
+let readoutCount = 0;
+var Readout = class {
+	#anchor;
+	#bubble;
+	#name = `--sonic-readout-${String(readoutCount += 1)}`;
+	#text;
+	constructor(bubble) {
+		this.#bubble = bubble;
+		this.#text = requireChild(bubble, "span", HTMLElement);
+		bubble.style.setProperty("position-anchor", this.#name);
+	}
+	close() {
+		this.#toggle(false);
+	}
+	show({ anchor, isOpen, text }) {
+		if (anchor !== this.#anchor) {
+			this.#anchor?.style.removeProperty("anchor-name");
+			anchor.style.setProperty("anchor-name", this.#name);
+			this.#anchor = anchor;
+		}
+		this.#text.hidden = text === void 0;
+		if (text !== void 0) this.#text.textContent = text;
+		this.#toggle(isOpen);
+	}
+	#toggle(isOpen) {
+		if (canPopover && this.#bubble.isConnected) this.#bubble.togglePopover(isOpen);
+	}
+};
+
+//#endregion
+export { Readout };
+//# sourceMappingURL=readout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"readout.js","names":[],"sources":["../../../src/elements/readout.ts"],"sourcesContent":["import { requireChild } from '#lib/render.ts';\n\ninterface ReadoutView {\n\tanchor: HTMLElement;\n\tisOpen: boolean;\n\ttext: string | undefined;\n}\n\n// happy-dom has no popover API\nconst canPopover = 'togglePopover' in HTMLElement.prototype;\n\nlet readoutCount = 0;\n\nexport class Readout {\n\t#anchor: HTMLElement | undefined;\n\n\treadonly #bubble: HTMLElement;\n\n\treadonly #name = `--sonic-readout-${String((readoutCount += 1))}`;\n\n\treadonly #text: HTMLElement;\n\n\tconstructor(bubble: HTMLElement) {\n\t\tthis.#bubble = bubble;\n\t\tthis.#text = requireChild(bubble, 'span', HTMLElement);\n\t\tbubble.style.setProperty('position-anchor', this.#name);\n\t}\n\n\tclose(): void {\n\t\tthis.#toggle(false);\n\t}\n\n\tshow({ anchor, isOpen, text }: ReadoutView): void {\n\t\tif (anchor !== this.#anchor) {\n\t\t\tthis.#anchor?.style.removeProperty('anchor-name');\n\t\t\tanchor.style.setProperty('anchor-name', this.#name);\n\t\t\tthis.#anchor = anchor;\n\t\t}\n\n\t\tthis.#text.hidden = text === undefined;\n\t\tif (text !== undefined) this.#text.textContent = text;\n\t\tthis.#toggle(isOpen);\n\t}\n\n\t#toggle(isOpen: boolean): void {\n\t\tif (canPopover && this.#bubble.isConnected) this.#bubble.togglePopover(isOpen);\n\t}\n}\n"],"mappings":";;;AASA,MAAM,aAAa,mBAAmB,YAAY;AAElD,IAAI,eAAe;AAEnB,IAAa,UAAb,MAAqB;CACpB;CAEA,AAAS;CAET,AAAS,QAAQ,mBAAmB,OAAQ,gBAAgB,CAAE;CAE9D,AAAS;CAET,YAAY,QAAqB;EAChC,KAAK,UAAU;EACf,KAAK,QAAQ,aAAa,QAAQ,QAAQ,WAAW;EACrD,OAAO,MAAM,YAAY,mBAAmB,KAAK,KAAK;CACvD;CAEA,QAAc;EACb,KAAK,QAAQ,KAAK;CACnB;CAEA,KAAK,EAAE,QAAQ,QAAQ,QAA2B;EACjD,IAAI,WAAW,KAAK,SAAS;GAC5B,KAAK,SAAS,MAAM,eAAe,aAAa;GAChD,OAAO,MAAM,YAAY,eAAe,KAAK,KAAK;GAClD,KAAK,UAAU;EAChB;EAEA,KAAK,MAAM,SAAS,SAAS;EAC7B,IAAI,SAAS,QAAW,KAAK,MAAM,cAAc;EACjD,KAAK,QAAQ,MAAM;CACpB;CAEA,QAAQ,QAAuB;EAC9B,IAAI,cAAc,KAAK,QAAQ,aAAa,KAAK,QAAQ,cAAc,MAAM;CAC9E;AACD"}

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

@@ -1,20 +1,14 @@
-import { SonicFormElement } from "./form-element.js";
+import { SonicRadioGroupElement } from "./radio-group.js";
 //#region src/elements/segmented.d.ts
 declare global {
   interface HTMLElementTagNameMap {
     'sonic-segmented': SonicSegmented;
   }
 }
-export declare class SonicSegmented extends SonicFormElement {
-  #private;
-  static readonly observedAttributes: string[];
-  get value(): string;
-  set value(next: string);
-  attributeChangedCallback(name: string): void;
+export declare class SonicSegmented extends SonicRadioGroupElement {
+  protected readonly group: HTMLDivElement;
   protected connect(signal: AbortSignal): void;
-  protected focusTarget(): HTMLElement | undefined;
-  protected render(): void;
-  protected restoreState(state: string): void;
+  protected renderOption(): HTMLButtonElement;
 }
 //#endregion
 //# sourceMappingURL=segmented.d.ts.map

package/dist/dev/elements/segmented.js

@@ -1,171 +1,21 @@
 import { template } from "../lib/render.js";
-import { SonicFormElement } from "./form-element.js";
-import { copyNode } from "../lib/copy-node.js";
+import { SonicRadioGroupElement } from "./radio-group.js";
 
 //#region src/elements/segmented.ts
 const renderSegmented = template(`<div class="sonic-segmented" role="radiogroup"></div>`, HTMLDivElement);
-const renderSegment = template(`
-		<button class="sonic-segmented-segment" role="radio" type="button">
+const renderOption = template(`
+		<button class="sonic-segmented-option" role="radio" type="button">
 			<span class="sonic-segmented-cap"></span>
 		</button>
 	`, HTMLButtonElement);
-const keySteps = /* @__PURE__ */ new Map([
-	["ArrowDown", 1],
-	["ArrowLeft", -1],
-	["ArrowRight", 1],
-	["ArrowUp", -1]
-]);
-function isUnder(segment, x, y) {
-	const box = segment.getBoundingClientRect();
-	return x >= box.left && x < box.right && y >= box.top && y < box.bottom;
-}
-function segmentValue(segment) {
-	return segment.querySelector("[data-sonic-value]")?.dataset.sonicValue;
-}
-var SonicSegmented = class extends SonicFormElement {
-	static observedAttributes = [...SonicFormElement.observedAttributes, "value"];
-	get value() {
-		return this.#value;
-	}
-	set value(next) {
-		if (next === this.#value) return;
-		this.#value = next;
-		this.render();
-	}
-	#press;
-	#segmented = renderSegmented();
-	#value = "";
-	attributeChangedCallback(name) {
-		if (name === "value") this.#value = this.getAttribute("value") ?? "";
-		this.render();
-	}
+var SonicSegmented = class extends SonicRadioGroupElement {
+	group = renderSegmented();
 	connect(signal) {
-		const segmented = this.#segmented;
-		this.upgradeProperties("value");
-		this.mirrorChildren({
-			control: segmented,
-			copy: (options) => {
-				this.#copyOptions(options);
-			},
-			isCopied: (child) => child instanceof Element && child.matches("[data-sonic-value]")
-		}, signal);
-		this.checkStyles(segmented, "segmented.css");
-		segmented.addEventListener("click", (event) => {
-			if (event instanceof PointerEvent && event.pointerType !== "") return;
-			const segment = this.#segmentOf(event.target);
-			if (segment) this.#select(segment);
-		}, { signal });
-		this.#bindPress(segmented, signal);
-		segmented.addEventListener("keydown", (event) => {
-			if (event.defaultPrevented) return;
-			const segment = this.#segmentOf(event.target);
-			const next = segment && this.#keyTarget(segment, event.key);
-			if (!next) return;
-			event.preventDefault();
-			this.#select(next);
-			next.focus();
-		}, { signal });
-	}
-	focusTarget() {
-		return this.#segments().find((segment) => segment.tabIndex === 0);
-	}
-	render() {
-		const segmented = this.#segmented;
-		const segments = this.#segments();
-		const checked = segments.find((segment) => segmentValue(segment) === this.#value);
-		const focusable = checked ?? segments[0];
-		for (const segment of segments) {
-			segment.disabled = this.isDisabled();
-			segment.setAttribute("aria-checked", String(segment === checked));
-			segment.tabIndex = segment === focusable ? 0 : -1;
-		}
-		this.forwardNaming(segmented, true);
-		this.writeFormValue(checked ? this.#value : null, this.#value);
-	}
-	restoreState(state) {
-		this.value = state;
-	}
-	#bindPress(segmented, signal) {
-		const isOwn = (event) => event.pointerId === this.#press?.pointerId;
-		const release = (event) => {
-			if (isOwn(event)) this.#hold(void 0);
-		};
-		segmented.addEventListener("pointerdown", (event) => {
-			const segment = this.#segmentOf(event.target);
-			if (!segment || event.button !== 0 || this.isDisabled()) return;
-			segmented.setPointerCapture(event.pointerId);
-			this.#hold({
-				pointerId: event.pointerId,
-				segment
-			});
-		}, { signal });
-		segmented.addEventListener("pointermove", (event) => {
-			if (!isOwn(event)) return;
-			this.#hold({
-				pointerId: event.pointerId,
-				segment: this.#segments().find((segment) => isUnder(segment, event.clientX, event.clientY))
-			});
-		}, { signal });
-		segmented.addEventListener("pointerup", (event) => {
-			const segment = isOwn(event) ? this.#press?.segment : void 0;
-			release(event);
-			if (!segment || this.isDisabled()) return;
-			this.#select(segment);
-			if (segmented.matches(":focus-within")) segment.focus();
-		}, { signal });
-		segmented.addEventListener("pointercancel", release, { signal });
-		segmented.addEventListener("lostpointercapture", release, { signal });
-		signal.addEventListener("abort", () => {
-			this.#hold(void 0);
-		}, { once: true });
-	}
-	#copyOptions(options) {
-		const segmented = this.#segmented;
-		const segments = this.#segments();
-		const focused = this.#segmentOf(segmented.querySelector(":scope > :focus"));
-		const focusedValue = focused && segmentValue(focused);
-		for (const [index, option] of options.entries()) {
-			let segment = segments[index];
-			if (!segment) {
-				segment = renderSegment();
-				segmented.append(segment);
-			}
-			segment.firstElementChild?.replaceChildren(copyNode(option));
-		}
-		for (const segment of segments.slice(options.length)) segment.remove();
-		this.render();
-		if (focused) this.#refocus(focused, focusedValue);
-	}
-	#hold(press) {
-		this.#press = press;
-		for (const segment of this.#segments()) segment.toggleAttribute("data-sonic-pressed", segment === press?.segment);
-	}
-	#keyTarget(segment, key) {
-		const segments = this.#segments();
-		if (key === "Home") return segments[0];
-		if (key === "End") return segments.at(-1);
-		const step = keySteps.get(key);
-		if (step === void 0) return void 0;
-		return segments[(segments.indexOf(segment) + step + segments.length) % segments.length];
-	}
-	#refocus(focused, value) {
-		const segments = this.#segments();
-		const next = segments.find((segment) => segmentValue(segment) === value) ?? segments.find((segment) => segment.tabIndex === 0);
-		if (next !== focused) next?.focus();
-	}
-	#segmentOf(target) {
-		if (!(target instanceof Element)) return void 0;
-		const segment = target.closest(".sonic-segmented-segment");
-		return segment instanceof HTMLButtonElement && segment.parentElement === this.#segmented ? segment : void 0;
-	}
-	#segments() {
-		return [...this.#segmented.children].filter((child) => child instanceof HTMLButtonElement);
+		super.connect(signal);
+		this.checkStyles(this.group, "segmented.css");
 	}
-	#select(segment) {
-		const next = segmentValue(segment);
-		if (next === void 0 || next === this.#value) return;
-		this.value = next;
-		this.dispatchEvent(new Event("change", { bubbles: true }));
+	renderOption() {
+		return renderOption();
 	}
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"segmented.js","names":[],"sources":["../../../src/elements/segmented.ts"],"sourcesContent":["import { SonicFormElement } from '#elements/form-element.ts';\nimport { copyNode } from '#lib/copy-node.ts';\nimport { template } from '#lib/render.ts';\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sonic-segmented': SonicSegmented;\n\t}\n}\n\nconst renderSegmented = template(\n\t/* HTML */ `<div class=\"sonic-segmented\" role=\"radiogroup\"></div>`,\n\tHTMLDivElement,\n);\n\nconst renderSegment = template(\n\t/* HTML */ `\n\t\t<button class=\"sonic-segmented-segment\" role=\"radio\" type=\"button\">\n\t\t\t<span class=\"sonic-segmented-cap\"></span>\n\t\t</button>\n\t`,\n\tHTMLButtonElement,\n);\n\n// RTL is not mirrored\nconst keySteps = new Map([\n\t['ArrowDown', 1],\n\t['ArrowLeft', -1],\n\t['ArrowRight', 1],\n\t['ArrowUp', -1],\n]);\n\ninterface Press {\n\tpointerId: number;\n\tsegment: HTMLButtonElement | undefined;\n}\n\nfunction isUnder(segment: Element, x: number, y: number): boolean {\n\tconst box = segment.getBoundingClientRect();\n\n\treturn x >= box.left && x < box.right && y >= box.top && y < box.bottom;\n}\n\nfunction segmentValue(segment: Element): string | undefined {\n\treturn segment.querySelector<HTMLElement | SVGElement>('[data-sonic-value]')?.dataset.sonicValue;\n}\n\nexport class SonicSegmented extends SonicFormElement {\n\tstatic override readonly observedAttributes = [...SonicFormElement.observedAttributes, 'value'];\n\n\t// As on the range, the property never writes the `value` attribute back\n\tget value(): string {\n\t\treturn this.#value;\n\t}\n\n\tset value(next: string) {\n\t\tif (next === this.#value) return;\n\n\t\tthis.#value = next;\n\t\tthis.render();\n\t}\n\n\t#press: Press | undefined;\n\n\treadonly #segmented = renderSegmented();\n\n\t#value = '';\n\n\tattributeChangedCallback(name: string): void {\n\t\tif (name === 'value') this.#value = this.getAttribute('value') ?? '';\n\t\tthis.render();\n\t}\n\n\tprotected connect(signal: AbortSignal): void {\n\t\tconst segmented = this.#segmented;\n\n\t\tthis.upgradeProperties('value');\n\t\tthis.mirrorChildren(\n\t\t\t{\n\t\t\t\tcontrol: segmented,\n\t\t\t\tcopy: (options) => {\n\t\t\t\t\tthis.#copyOptions(options);\n\t\t\t\t},\n\t\t\t\tisCopied: (child) => child instanceof Element && child.matches('[data-sonic-value]'),\n\t\t\t},\n\t\t\tsignal,\n\t\t);\n\t\tthis.checkStyles(segmented, 'segmented.css');\n\n\t\tsegmented.addEventListener(\n\t\t\t'click',\n\t\t\t(event) => {\n\t\t\t\tif (event instanceof PointerEvent && event.pointerType !== '') return;\n\n\t\t\t\tconst segment = this.#segmentOf(event.target);\n\t\t\t\tif (segment) this.#select(segment);\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tthis.#bindPress(segmented, signal);\n\t\tsegmented.addEventListener(\n\t\t\t'keydown',\n\t\t\t(event) => {\n\t\t\t\tif (event.defaultPrevented) return;\n\n\t\t\t\tconst segment = this.#segmentOf(event.target);\n\t\t\t\tconst next = segment && this.#keyTarget(segment, event.key);\n\t\t\t\tif (!next) return;\n\n\t\t\t\tevent.preventDefault();\n\t\t\t\tthis.#select(next);\n\t\t\t\tnext.focus();\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t}\n\n\tprotected override focusTarget(): HTMLElement | undefined {\n\t\treturn this.#segments().find((segment) => segment.tabIndex === 0);\n\t}\n\n\t// As a radio group, only a checked option submits\n\tprotected render(): void {\n\t\tconst segmented = this.#segmented;\n\t\tconst segments = this.#segments();\n\t\tconst checked = segments.find((segment) => segmentValue(segment) === this.#value);\n\t\tconst focusable = checked ?? segments[0];\n\n\t\tfor (const segment of segments) {\n\t\t\tsegment.disabled = this.isDisabled();\n\t\t\tsegment.setAttribute('aria-checked', String(segment === checked));\n\t\t\tsegment.tabIndex = segment === focusable ? 0 : -1;\n\t\t}\n\t\tthis.forwardNaming(segmented, true);\n\t\t// eslint-disable-next-line unicorn/no-null -- `null` submits nothing\n\t\tthis.writeFormValue(checked ? this.#value : null, this.#value);\n\t}\n\n\tprotected restoreState(state: string): void {\n\t\tthis.value = state;\n\t}\n\n\t#bindPress(segmented: HTMLElement, signal: AbortSignal): void {\n\t\tconst isOwn = (event: PointerEvent): boolean => event.pointerId === this.#press?.pointerId;\n\t\tconst release = (event: PointerEvent): void => {\n\t\t\tif (isOwn(event)) this.#hold(undefined);\n\t\t};\n\n\t\tsegmented.addEventListener(\n\t\t\t'pointerdown',\n\t\t\t(event) => {\n\t\t\t\tconst segment = this.#segmentOf(event.target);\n\t\t\t\tif (!segment || event.button !== 0 || this.isDisabled()) return;\n\n\t\t\t\tsegmented.setPointerCapture(event.pointerId);\n\t\t\t\tthis.#hold({ pointerId: event.pointerId, segment });\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tsegmented.addEventListener(\n\t\t\t'pointermove',\n\t\t\t(event) => {\n\t\t\t\tif (!isOwn(event)) return;\n\n\t\t\t\tthis.#hold({\n\t\t\t\t\tpointerId: event.pointerId,\n\t\t\t\t\tsegment: this.#segments().find((segment) =>\n\t\t\t\t\t\tisUnder(segment, event.clientX, event.clientY),\n\t\t\t\t\t),\n\t\t\t\t});\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tsegmented.addEventListener(\n\t\t\t'pointerup',\n\t\t\t(event) => {\n\t\t\t\tconst segment = isOwn(event) ? this.#press?.segment : undefined;\n\n\t\t\t\trelease(event);\n\t\t\t\tif (!segment || this.isDisabled()) return;\n\n\t\t\t\tthis.#select(segment);\n\t\t\t\tif (segmented.matches(':focus-within')) segment.focus();\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tsegmented.addEventListener('pointercancel', release, { signal });\n\t\tsegmented.addEventListener('lostpointercapture', release, { signal });\n\t\tsignal.addEventListener(\n\t\t\t'abort',\n\t\t\t() => {\n\t\t\t\tthis.#hold(undefined);\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\t}\n\n\t// Segments are kept by position, so focus follows its option's value across a reorder\n\t#copyOptions(options: Array<Node>): void {\n\t\tconst segmented = this.#segmented;\n\t\tconst segments = this.#segments();\n\t\tconst focused = this.#segmentOf(segmented.querySelector(':scope > :focus'));\n\t\tconst focusedValue = focused && segmentValue(focused);\n\n\t\tfor (const [index, option] of options.entries()) {\n\t\t\tlet segment = segments[index];\n\t\t\tif (!segment) {\n\t\t\t\tsegment = renderSegment();\n\t\t\t\tsegmented.append(segment);\n\t\t\t}\n\n\t\t\tsegment.firstElementChild?.replaceChildren(copyNode(option));\n\t\t}\n\t\tfor (const segment of segments.slice(options.length)) segment.remove();\n\t\tthis.render();\n\t\tif (focused) this.#refocus(focused, focusedValue);\n\t}\n\n\t#hold(press: Press | undefined): void {\n\t\tthis.#press = press;\n\t\tfor (const segment of this.#segments()) {\n\t\t\tsegment.toggleAttribute('data-sonic-pressed', segment === press?.segment);\n\t\t}\n\t}\n\n\t#keyTarget(segment: HTMLButtonElement, key: string): HTMLButtonElement | undefined {\n\t\tconst segments = this.#segments();\n\n\t\tif (key === 'Home') return segments[0];\n\t\tif (key === 'End') return segments.at(-1);\n\n\t\tconst step = keySteps.get(key);\n\t\tif (step === undefined) return undefined;\n\n\t\tconst index = segments.indexOf(segment) + step;\n\n\t\treturn segments[(index + segments.length) % segments.length];\n\t}\n\n\t#refocus(focused: HTMLButtonElement, value: string | undefined): void {\n\t\tconst segments = this.#segments();\n\t\tconst next =\n\t\t\tsegments.find((segment) => segmentValue(segment) === value) ??\n\t\t\tsegments.find((segment) => segment.tabIndex === 0);\n\n\t\tif (next !== focused) next?.focus();\n\t}\n\n\t#segmentOf(target: EventTarget | null): HTMLButtonElement | undefined {\n\t\tif (!(target instanceof Element)) return undefined;\n\n\t\tconst segment = target.closest('.sonic-segmented-segment');\n\n\t\treturn segment instanceof HTMLButtonElement && segment.parentElement === this.#segmented\n\t\t\t? segment\n\t\t\t: undefined;\n\t}\n\n\t#segments(): Array<HTMLButtonElement> {\n\t\treturn [...this.#segmented.children].filter(\n\t\t\t(child): child is HTMLButtonElement => child instanceof HTMLButtonElement,\n\t\t);\n\t}\n\n\t#select(segment: HTMLButtonElement): void {\n\t\tconst next = segmentValue(segment);\n\t\tif (next === undefined || next === this.#value) return;\n\n\t\tthis.value = next;\n\t\tthis.dispatchEvent(new Event('change', { bubbles: true }));\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"segmented.js","names":[],"sources":["../../../src/elements/segmented.ts"],"sourcesContent":["import { SonicRadioGroupElement } from '#elements/radio-group.ts';\nimport { template } from '#lib/render.ts';\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sonic-segmented': SonicSegmented;\n\t}\n}\n\nconst renderSegmented = template(\n\t/* HTML */ `<div class=\"sonic-segmented\" role=\"radiogroup\"></div>`,\n\tHTMLDivElement,\n);\n\nconst renderOption = template(\n\t/* HTML */ `\n\t\t<button class=\"sonic-segmented-option\" role=\"radio\" type=\"button\">\n\t\t\t<span class=\"sonic-segmented-cap\"></span>\n\t\t</button>\n\t`,\n\tHTMLButtonElement,\n);\n\nexport class SonicSegmented extends SonicRadioGroupElement {\n\tprotected readonly group = renderSegmented();\n\n\tprotected override connect(signal: AbortSignal): void {\n\t\tsuper.connect(signal);\n\t\tthis.checkStyles(this.group, 'segmented.css');\n\t}\n\n\tprotected renderOption(): HTMLButtonElement {\n\t\treturn renderOption();\n\t}\n}\n"],"mappings":";;;;AASA,MAAM,kBAAkB,SACZ,yDACX,cACD;AAEA,MAAM,eAAe,SACT;;;;IAKX,iBACD;AAEA,IAAa,iBAAb,cAAoC,uBAAuB;CAC1D,AAAmB,QAAQ,gBAAgB;CAE3C,AAAmB,QAAQ,QAA2B;EACrD,MAAM,QAAQ,MAAM;EACpB,KAAK,YAAY,KAAK,OAAO,eAAe;CAC7C;CAEA,AAAU,eAAkC;EAC3C,OAAO,aAAa;CACrB;AACD"}

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

@@ -1,23 +1,29 @@
-import { SonicRangeElement } from "./range-element.js";
+import { SonicValueElement } from "./value-element.js";
 //#region src/elements/slider.d.ts
 declare global {
   interface HTMLElementTagNameMap {
     'sonic-slider': SonicSlider;
   }
 }
-export declare class SonicSlider extends SonicRangeElement {
+export declare class SonicSlider extends SonicValueElement {
   #private;
   static readonly observedAttributes: string[];
   get groovePress(): 'jump' | 'none';
   set groovePress(gesture: 'jump' | 'none' | undefined);
   get modulation(): number;
   set modulation(amount: number | undefined);
+  get modulationValue(): number | undefined;
+  set modulationValue(value: number | undefined);
   get orientation(): 'horizontal' | 'vertical';
   set orientation(direction: 'horizontal' | 'vertical' | undefined);
+  get spring(): boolean;
+  set spring(isSpring: boolean);
   connectedCallback(): void;
   protected connect(signal: AbortSignal): void;
+  protected controlOrientation(): 'horizontal' | 'vertical';
+  protected draw(): void;
   protected focusTarget(): HTMLElement;
-  protected render(): void;
+  protected springTarget(): number | undefined;
 }
 //#endregion
 //# sourceMappingURL=slider.d.ts.map