@xsynaptic/sonic-ui 0.1.0

package/dist/elements/range-element.js

@@ -0,0 +1,348 @@
+import { RangeEntry } from "./range-entry.js";
+import { writeAttribute } from "../lib/write-attribute.js";
+import { SonicElement } from "./sonic-element.js";
+import { requireChild } from "../lib/render.js";
+import { clampUnit, linearTaper, logTaper, skewTaper } 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 anchorCount = 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 sliderAttributes = [
+	"aria-disabled",
+	"aria-orientation",
+	"aria-valuemax",
+	"aria-valuemin",
+	"aria-valuenow",
+	"aria-valuetext",
+	"role",
+	"tabindex"
+];
+var SonicRangeElement = class extends SonicElement {
+	static observedAttributes = [
+		...SonicElement.observedAttributes,
+		"max",
+		"midpoint",
+		"min",
+		"notched",
+		"origin",
+		"readout",
+		"step",
+		"taper",
+		"value"
+	];
+	get formatValue() {
+		return this.#formatValue;
+	}
+	set formatValue(format) {
+		this.#formatValue = format;
+		this.render();
+	}
+	get parseValue() {
+		return this.#parseValue;
+	}
+	set parseValue(parse) {
+		this.#parseValue = parse;
+	}
+	get value() {
+		return this.#value;
+	}
+	set value(next) {
+		if (this.#drag) return;
+		this.#write(next);
+	}
+	#anchor = `--sonic-readout-${String(anchorCount += 1)}`;
+	#drag;
+	#entry;
+	#formatValue;
+	#isDirty = false;
+	#keyRevealTimer;
+	#parseValue;
+	#readout;
+	#value = 0;
+	attributeChangedCallback(name) {
+		if (name === "value") {
+			if (this.#drag) return;
+			this.#isDirty = false;
+		}
+		if (name === "disabled" && this.disabled) {
+			this.#entry?.close(false);
+			this.#endDrag();
+		}
+		this.#value = this.#clamp(this.#isDirty ? this.#value : this.numberAttribute("value", this.min()));
+		this.render();
+	}
+	connectedCallback() {
+		this.upgradeProperty("formatValue");
+		this.upgradeProperty("parseValue");
+		this.upgradeProperty("value");
+		super.connectedCallback();
+	}
+	bindGestures(control, signal, grab) {
+		const entry = this.#bindEntry(control, signal);
+		control.addEventListener("pointerdown", (event) => {
+			if (event.button !== 0 || this.disabled || entry.isOpen) return;
+			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;
+			drag.rawFraction = clampUnit(drag.rawFraction + (position - drag.lastPosition) / drag.travelPx * scale);
+			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.getAttribute("double-press") === "reset") this.#reset();
+			else entry.open();
+		}, { signal });
+		this.#bindKeys(control, entry, signal);
+		signal.addEventListener("abort", () => {
+			this.#endDrag();
+			this.#hideForKeys();
+		}, { once: true });
+	}
+	clampRange(next) {
+		return Math.min(this.max(), Math.max(this.min(), next));
+	}
+	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;
+	}
+	max() {
+		return Math.max(this.min(), this.numberAttribute("max", 100));
+	}
+	min() {
+		return this.numberAttribute("min", 0);
+	}
+	originFraction() {
+		return this.fraction(this.numberAttribute("origin", this.min()));
+	}
+	positions() {
+		const positions = Math.round(this.range() / this.#step()) + 1;
+		if (!this.hasAttribute("notched") || !Number.isFinite(positions) || positions < 2) return;
+		return positions;
+	}
+	range() {
+		return this.max() - this.min();
+	}
+	renderAria(control, orientation) {
+		if (this.#entry?.isOpen) {
+			for (const name of sliderAttributes) control.removeAttribute(name);
+			this.forwardNaming(control, false);
+			this.#renderReadout();
+			return;
+		}
+		control.setAttribute("role", "slider");
+		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();
+	}
+	valueAt(fraction) {
+		return (this.#taper() ?? linearTaper(this.min(), this.max())).value(fraction);
+	}
+	#bindEntry(control, signal) {
+		const input = requireChild(control, "input", HTMLInputElement);
+		const bubble = requireChild(control, "[popover]", HTMLElement);
+		this.#readout = {
+			bubble,
+			text: requireChild(bubble, "span", HTMLElement)
+		};
+		control.style.setProperty("anchor-name", this.#anchor);
+		bubble.style.setProperty("position-anchor", this.#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.disabled || 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 }));
+	}
+	#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.hasAttribute("readout");
+	}
+	#keyTarget(key) {
+		if (key === "Home") return this.min();
+		if (key === "End") return this.max();
+		if (resetKeys.has(key)) return this.#resetValue();
+		const steps = keySteps.get(key);
+		if (steps === void 0) return void 0;
+		const step = this.#step() > 0 ? this.#step() : this.range() / 100;
+		const taper = this.#taper();
+		if (!taper) return this.#value + steps * step;
+		const next = this.#clamp(taper.value(taper.position(this.#value) + steps / 100));
+		return next === this.#value ? this.#value + Math.sign(steps) * step : next;
+	}
+	#renderDisabled(control) {
+		if (this.disabled) {
+			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.numberAttribute("default", NaN));
+	}
+	#resetValue() {
+		const value = this.numberAttribute("default", NaN);
+		return Number.isFinite(value) ? value : void 0;
+	}
+	#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();
+	}
+	#step() {
+		return this.numberAttribute("step", 1);
+	}
+	#taper() {
+		if (this.hasAttribute("notched")) return void 0;
+		const min = this.min();
+		const max = this.max();
+		return (this.getAttribute("taper") === "log" ? logTaper(min, max) : void 0) ?? skewTaper(min, max, this.numberAttribute("midpoint", NaN));
+	}
+	#valueText() {
+		return this.#formatValue?.(this.#value) ?? String(this.#value);
+	}
+	#write(next) {
+		if (!Number.isFinite(next)) return;
+		this.#isDirty = true;
+		this.#value = this.#clamp(next);
+		this.render();
+	}
+};
+
+//#endregion
+export { SonicRangeElement };
+//# sourceMappingURL=range-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"range-element.js","names":[],"sources":["../../src/elements/range-element.ts"],"sourcesContent":["import type { Taper } from '#lib/taper.ts';\n\nimport { RangeEntry } from '#elements/range-entry.ts';\nimport { SonicElement } from '#elements/sonic-element.ts';\nimport { requireChild } from '#lib/render.ts';\nimport { clampUnit, linearTaper, logTaper, skewTaper } from '#lib/taper.ts';\nimport { writeAttribute } from '#lib/write-attribute.ts';\n\n// `position` grows with the value\nexport interface RangeAxis {\n\tposition: (event: PointerEvent) => number;\n\ttravelPx: number;\n}\n\ninterface RangeDrag extends RangeAxis {\n\tfromValue: number;\n\tisRevealed: boolean;\n\tlastPosition: number;\n\tpointerId: number;\n\t// Unstepped, or a slow drag rounds back to where it started\n\trawFraction: number;\n\trevealTimer: ReturnType<typeof setTimeout> | undefined;\n\tstartPosition: number;\n}\n\nconst fineScale = 0.1;\nconst keyRevealMs = 1000;\nconst pageSteps = 10;\nconst revealMs = 250;\nconst revealPx = 4;\n\n// happy-dom has no popover API\nconst canPopover = 'togglePopover' in HTMLElement.prototype;\n\n// A shared anchor name resolves to the last one on the page\nlet anchorCount = 0;\n\n// A Mac keyboard's Delete sends Backspace\nconst resetKeys = new Set(['Backspace', 'Delete']);\n\nconst keySteps = new Map([\n\t['ArrowDown', -1],\n\t['ArrowLeft', -1],\n\t['ArrowRight', 1],\n\t['ArrowUp', 1],\n\t['PageDown', -pageSteps],\n\t['PageUp', pageSteps],\n]);\n\n// A slider's children are presentational, so these come off while the entry is open\nconst sliderAttributes = [\n\t'aria-disabled',\n\t'aria-orientation',\n\t'aria-valuemax',\n\t'aria-valuemin',\n\t'aria-valuenow',\n\t'aria-valuetext',\n\t'role',\n\t'tabindex',\n];\n\n// As on `<input type=\"range\">`, the property never writes the `value` attribute back\nexport abstract class SonicRangeElement extends SonicElement {\n\tstatic override readonly observedAttributes = [\n\t\t...SonicElement.observedAttributes,\n\t\t'max',\n\t\t'midpoint',\n\t\t'min',\n\t\t'notched',\n\t\t'origin',\n\t\t'readout',\n\t\t'step',\n\t\t'taper',\n\t\t'value',\n\t];\n\n\tget formatValue(): ((value: number) => string) | undefined {\n\t\treturn this.#formatValue;\n\t}\n\n\tset formatValue(format: ((value: number) => string) | undefined) {\n\t\tthis.#formatValue = format;\n\t\tthis.render();\n\t}\n\n\tget parseValue(): ((text: string) => number) | undefined {\n\t\treturn this.#parseValue;\n\t}\n\n\tset parseValue(parse: ((text: string) => number) | undefined) {\n\t\tthis.#parseValue = parse;\n\t}\n\n\tget value(): number {\n\t\treturn this.#value;\n\t}\n\n\t// A drag owns the value, so a timer's write can't pull the cap from under the pointer\n\tset value(next: number) {\n\t\tif (this.#drag) return;\n\n\t\tthis.#write(next);\n\t}\n\n\treadonly #anchor = `--sonic-readout-${String((anchorCount += 1))}`;\n\n\t#drag: RangeDrag | undefined;\n\n\t#entry: RangeEntry | undefined;\n\n\t#formatValue: ((value: number) => string) | undefined;\n\n\t// Re-read from the attribute until the property is set, since `max` may arrive after `value`\n\t#isDirty = false;\n\n\t#keyRevealTimer: ReturnType<typeof setTimeout> | undefined;\n\n\t#parseValue: ((text: string) => number) | undefined;\n\n\t#readout: undefined | { bubble: HTMLElement; text: HTMLElement };\n\n\t#value = 0;\n\n\tattributeChangedCallback(name: string): void {\n\t\tif (name === 'value') {\n\t\t\tif (this.#drag) return;\n\n\t\t\tthis.#isDirty = false;\n\t\t}\n\t\tif (name === 'disabled' && this.disabled) {\n\t\t\tthis.#entry?.close(false);\n\t\t\tthis.#endDrag();\n\t\t}\n\n\t\tthis.#value = this.#clamp(\n\t\t\tthis.#isDirty ? this.#value : this.numberAttribute('value', this.min()),\n\t\t);\n\t\tthis.render();\n\t}\n\n\toverride connectedCallback(): void {\n\t\tthis.upgradeProperty('formatValue');\n\t\tthis.upgradeProperty('parseValue');\n\t\tthis.upgradeProperty('value');\n\t\tsuper.connectedCallback();\n\t}\n\n\tprotected bindGestures(\n\t\tcontrol: HTMLElement,\n\t\tsignal: AbortSignal,\n\t\tgrab: (event: PointerEvent) => RangeAxis | undefined,\n\t): void {\n\t\tconst entry = this.#bindEntry(control, signal);\n\n\t\tcontrol.addEventListener(\n\t\t\t'pointerdown',\n\t\t\t(event) => {\n\t\t\t\tif (event.button !== 0 || this.disabled || entry.isOpen) return;\n\n\t\t\t\tcontrol.focus();\n\t\t\t\tif (event.metaKey || event.ctrlKey) {\n\t\t\t\t\tthis.#reset();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst fromValue = this.#value;\n\t\t\t\tconst axis = grab(event);\n\t\t\t\tif (!axis) return;\n\n\t\t\t\tconst startPosition = axis.position(event);\n\t\t\t\tconst drag: RangeDrag = {\n\t\t\t\t\tfromValue,\n\t\t\t\t\tisRevealed: false,\n\t\t\t\t\tlastPosition: startPosition,\n\t\t\t\t\tpointerId: event.pointerId,\n\t\t\t\t\tposition: axis.position,\n\t\t\t\t\trawFraction: this.fraction(this.#value),\n\t\t\t\t\trevealTimer: undefined,\n\t\t\t\t\tstartPosition,\n\t\t\t\t\ttravelPx: axis.travelPx,\n\t\t\t\t};\n\n\t\t\t\tdrag.revealTimer = setTimeout(() => {\n\t\t\t\t\tthis.#reveal(drag);\n\t\t\t\t}, revealMs);\n\t\t\t\tthis.#drag = drag;\n\t\t\t\tcontrol.setPointerCapture(event.pointerId);\n\t\t\t\tthis.toggleState('dragging', true);\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tcontrol.addEventListener(\n\t\t\t'pointermove',\n\t\t\t(event) => {\n\t\t\t\tconst drag = this.#drag;\n\t\t\t\tif (event.pointerId !== drag?.pointerId) return;\n\n\t\t\t\tconst position = drag.position(event);\n\t\t\t\tconst scale = event.shiftKey ? fineScale : 1;\n\n\t\t\t\t// Per move, so pressing Shift mid-drag changes pace without a jump\n\t\t\t\tdrag.rawFraction = clampUnit(\n\t\t\t\t\tdrag.rawFraction + ((position - drag.lastPosition) / drag.travelPx) * scale,\n\t\t\t\t);\n\t\t\t\tdrag.lastPosition = position;\n\t\t\t\tif (Math.abs(position - drag.startPosition) >= revealPx) this.#reveal(drag);\n\t\t\t\tthis.input(this.valueAt(drag.rawFraction));\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\n\t\tconst endDrag = (event: PointerEvent): void => {\n\t\t\tif (event.pointerId === this.#drag?.pointerId) this.#endDrag();\n\t\t};\n\n\t\tcontrol.addEventListener(\n\t\t\t'pointercancel',\n\t\t\t(event) => {\n\t\t\t\tendDrag(event);\n\t\t\t\tentry.forgetPress();\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\t// Other code can release capture without a `pointerup`\n\t\tcontrol.addEventListener('lostpointercapture', endDrag, { signal });\n\t\tcontrol.addEventListener(\n\t\t\t'pointerup',\n\t\t\t(event) => {\n\t\t\t\tif (event.pointerId !== this.#drag?.pointerId) return;\n\n\t\t\t\tthis.#endDrag();\n\t\t\t\tif (!entry.press(event)) return;\n\n\t\t\t\tif (this.getAttribute('double-press') === 'reset') this.#reset();\n\t\t\t\telse entry.open();\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tthis.#bindKeys(control, entry, signal);\n\t\tsignal.addEventListener(\n\t\t\t'abort',\n\t\t\t() => {\n\t\t\t\tthis.#endDrag();\n\t\t\t\tthis.#hideForKeys();\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\t}\n\n\tprotected clampRange(next: number): number {\n\t\treturn Math.min(this.max(), Math.max(this.min(), next));\n\t}\n\n\tprotected fraction(value: number): number {\n\t\treturn (this.#taper() ?? linearTaper(this.min(), this.max())).position(value);\n\t}\n\n\tprotected input(next: number): boolean {\n\t\tconst previous = this.#value;\n\n\t\tthis.#write(next);\n\t\tif (this.#value === previous) return false;\n\n\t\tthis.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n\n\t\treturn true;\n\t}\n\n\tprotected max(): number {\n\t\treturn Math.max(this.min(), this.numberAttribute('max', 100));\n\t}\n\n\tprotected min(): number {\n\t\treturn this.numberAttribute('min', 0);\n\t}\n\n\tprotected originFraction(): number {\n\t\treturn this.fraction(this.numberAttribute('origin', this.min()));\n\t}\n\n\tprotected positions(): number | undefined {\n\t\tconst positions = Math.round(this.range() / this.#step()) + 1;\n\n\t\tif (!this.hasAttribute('notched') || !Number.isFinite(positions) || positions < 2) return;\n\n\t\treturn positions;\n\t}\n\n\tprotected range(): number {\n\t\treturn this.max() - this.min();\n\t}\n\n\tprotected abstract render(): void;\n\n\tprotected renderAria(control: HTMLElement, orientation?: 'horizontal' | 'vertical'): void {\n\t\tif (this.#entry?.isOpen) {\n\t\t\tfor (const name of sliderAttributes) control.removeAttribute(name);\n\t\t\tthis.forwardNaming(control, false);\n\t\t\tthis.#renderReadout();\n\t\t\treturn;\n\t\t}\n\n\t\tcontrol.setAttribute('role', 'slider');\n\t\tcontrol.setAttribute('aria-valuemin', String(this.min()));\n\t\tcontrol.setAttribute('aria-valuemax', String(this.max()));\n\t\tcontrol.setAttribute('aria-valuenow', String(this.#value));\n\t\tif (orientation) control.setAttribute('aria-orientation', orientation);\n\t\twriteAttribute(control, 'aria-valuetext', this.#formatValue?.(this.#value));\n\t\tthis.forwardNaming(control, true);\n\t\tthis.#renderDisabled(control);\n\t\tthis.#renderReadout();\n\t}\n\n\tprotected valueAt(fraction: number): number {\n\t\treturn (this.#taper() ?? linearTaper(this.min(), this.max())).value(fraction);\n\t}\n\n\t#bindEntry(control: HTMLElement, signal: AbortSignal): RangeEntry {\n\t\tconst input = requireChild(control, 'input', HTMLInputElement);\n\t\tconst bubble = requireChild(control, '[popover]', HTMLElement);\n\n\t\tthis.#readout = { bubble, text: requireChild(bubble, 'span', HTMLElement) };\n\t\tcontrol.style.setProperty('anchor-name', this.#anchor);\n\t\tbubble.style.setProperty('position-anchor', this.#anchor);\n\n\t\tconst entry = new RangeEntry(input, {\n\t\t\tcommit: (text) => {\n\t\t\t\t// eslint-disable-next-line unicorn/prefer-number-coercion -- `Number('')` is 0; an emptied field should leave the value alone\n\t\t\t\tthis.#commit((this.#parseValue ?? Number.parseFloat)(text));\n\t\t\t},\n\t\t\t// `Number.parseFloat` reads \"5 kHz\" as 5\n\t\t\ttext: () => (this.#parseValue ? this.#valueText() : String(this.#value)),\n\t\t\ttoggle: (isOpen) => {\n\t\t\t\tif (isOpen) this.forwardNaming(input, true);\n\t\t\t\tthis.toggleState('editing', isOpen);\n\t\t\t\tthis.render();\n\t\t\t},\n\t\t});\n\n\t\tthis.#entry = entry;\n\t\tentry.bind(control, signal);\n\n\t\treturn entry;\n\t}\n\n\t#bindKeys(control: HTMLElement, entry: RangeEntry, signal: AbortSignal): void {\n\t\tcontrol.addEventListener(\n\t\t\t'keydown',\n\t\t\t(event) => {\n\t\t\t\tif (this.disabled || event.defaultPrevented || event.target !== control) return;\n\n\t\t\t\tif (event.key === 'Enter') {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tentry.open();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst next = this.#keyTarget(event.key);\n\t\t\t\tif (next === undefined) return;\n\n\t\t\t\tevent.preventDefault();\n\t\t\t\tthis.#commit(next);\n\t\t\t\tthis.#revealForKeys();\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tcontrol.addEventListener(\n\t\t\t'blur',\n\t\t\t() => {\n\t\t\t\tthis.#hideForKeys();\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t}\n\n\t#clamp(next: number): number {\n\t\tconst min = this.min();\n\t\tconst step = this.#step();\n\t\tconst stepped = step > 0 ? min + Math.round((next - min) / step) * step : next;\n\n\t\t// A step like 0.01 leaves float residue\n\t\treturn this.clampRange(Number(stepped.toPrecision(12)));\n\t}\n\n\t#commit(next: number): void {\n\t\tif (this.input(next)) this.dispatchEvent(new Event('change', { bubbles: true }));\n\t}\n\n\t#endDrag(): void {\n\t\tconst drag = this.#drag;\n\t\tif (!drag) return;\n\n\t\tclearTimeout(drag.revealTimer);\n\t\tthis.#drag = undefined;\n\t\tthis.toggleState('dragging', false);\n\t\tthis.#renderReadout();\n\t\tif (this.#value !== drag.fromValue) this.dispatchEvent(new Event('change', { bubbles: true }));\n\t}\n\n\t#hideForKeys(): void {\n\t\tclearTimeout(this.#keyRevealTimer);\n\t\tif (this.#keyRevealTimer === undefined) return;\n\n\t\tthis.#keyRevealTimer = undefined;\n\t\tthis.#renderReadout();\n\t}\n\n\t#isValueShown(): boolean {\n\t\tconst isRevealed = this.#drag?.isRevealed === true || this.#keyRevealTimer !== undefined;\n\n\t\treturn isRevealed && this.hasAttribute('readout');\n\t}\n\n\t#keyTarget(key: string): number | undefined {\n\t\tif (key === 'Home') return this.min();\n\t\tif (key === 'End') return this.max();\n\t\tif (resetKeys.has(key)) return this.#resetValue();\n\n\t\tconst steps = keySteps.get(key);\n\t\tif (steps === undefined) return undefined;\n\n\t\tconst step = this.#step() > 0 ? this.#step() : this.range() / 100;\n\t\tconst taper = this.#taper();\n\t\tif (!taper) return this.#value + steps * step;\n\n\t\t// By travel, since steps at the wide end would take forever; at least one step, or the snap holds it in place\n\t\tconst next = this.#clamp(taper.value(taper.position(this.#value) + steps / 100));\n\n\t\treturn next === this.#value ? this.#value + Math.sign(steps) * step : next;\n\t}\n\n\t#renderDisabled(control: HTMLElement): void {\n\t\tif (this.disabled) {\n\t\t\tcontrol.setAttribute('aria-disabled', 'true');\n\t\t\tcontrol.removeAttribute('tabindex');\n\t\t\treturn;\n\t\t}\n\n\t\tcontrol.removeAttribute('aria-disabled');\n\t\tcontrol.setAttribute('tabindex', '0');\n\t}\n\n\t#renderReadout(): void {\n\t\tconst readout = this.#readout;\n\t\tif (!readout || !canPopover || !this.isConnected) return;\n\n\t\tconst isEditing = this.#entry?.isOpen === true;\n\n\t\treadout.text.hidden = isEditing;\n\t\tif (!isEditing) readout.text.textContent = this.#valueText();\n\t\treadout.bubble.togglePopover(isEditing || this.#isValueShown());\n\t}\n\n\t#reset(): void {\n\t\tthis.#commit(this.numberAttribute('default', NaN));\n\t}\n\n\t#resetValue(): number | undefined {\n\t\tconst value = this.numberAttribute('default', NaN);\n\n\t\treturn Number.isFinite(value) ? value : undefined;\n\t}\n\n\t#reveal(drag: RangeDrag): void {\n\t\tif (drag.isRevealed || this.#drag !== drag) return;\n\n\t\tdrag.isRevealed = true;\n\t\tthis.#renderReadout();\n\t}\n\n\t#revealForKeys(): void {\n\t\tclearTimeout(this.#keyRevealTimer);\n\t\tthis.#keyRevealTimer = setTimeout(() => {\n\t\t\tthis.#hideForKeys();\n\t\t}, keyRevealMs);\n\t\tthis.#renderReadout();\n\t}\n\n\t#step(): number {\n\t\treturn this.numberAttribute('step', 1);\n\t}\n\n\t// Notches are evenly spaced, so a notched control stays linear\n\t#taper(): Taper | undefined {\n\t\tif (this.hasAttribute('notched')) return undefined;\n\n\t\tconst min = this.min();\n\t\tconst max = this.max();\n\t\tconst log = this.getAttribute('taper') === 'log' ? logTaper(min, max) : undefined;\n\n\t\treturn log ?? skewTaper(min, max, this.numberAttribute('midpoint', NaN));\n\t}\n\n\t#valueText(): string {\n\t\treturn this.#formatValue?.(this.#value) ?? String(this.#value);\n\t}\n\n\t#write(next: number): void {\n\t\tif (!Number.isFinite(next)) return;\n\n\t\tthis.#isDirty = true;\n\t\tthis.#value = this.#clamp(next);\n\t\tthis.render();\n\t}\n}\n"],"mappings":"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"}

package/dist/elements/range-entry.js

@@ -0,0 +1,73 @@
+//#region src/elements/range-entry.ts
+const doublePressMs = 500;
+const doublePressPx = 4;
+function isDoublePress(previous, next) {
+	if (!previous) return false;
+	return next.time - previous.time < doublePressMs && Math.hypot(next.x - previous.x, next.y - previous.y) < doublePressPx;
+}
+var RangeEntry = class {
+	get isOpen() {
+		return this.#isOpen;
+	}
+	#input;
+	#isOpen = false;
+	#lastPress;
+	#options;
+	constructor(input, options) {
+		this.#input = input;
+		this.#options = options;
+	}
+	bind(control, signal) {
+		const input = this.#input;
+		input.addEventListener("keydown", (event) => {
+			if (event.isComposing || event.key !== "Enter" && event.key !== "Escape") return;
+			event.preventDefault();
+			this.close(event.key === "Enter");
+			control.focus();
+		}, { signal });
+		input.addEventListener("blur", () => {
+			this.close(true);
+		}, { signal });
+		for (const type of ["change", "input"]) input.addEventListener(type, (event) => {
+			event.stopPropagation();
+		}, { signal });
+		signal.addEventListener("abort", () => {
+			this.close(false);
+		}, { once: true });
+	}
+	close(isCommitting) {
+		if (!this.#isOpen) return;
+		this.#isOpen = false;
+		this.#input.hidden = true;
+		this.#options.toggle(false);
+		if (isCommitting) this.#options.commit(this.#input.value);
+	}
+	forgetPress() {
+		this.#lastPress = void 0;
+	}
+	open() {
+		const input = this.#input;
+		this.#isOpen = true;
+		input.value = this.#options.text();
+		input.hidden = false;
+		this.#options.toggle(true);
+		input.focus();
+		input.select();
+	}
+	press(event) {
+		const press = {
+			time: event.timeStamp,
+			x: event.clientX,
+			y: event.clientY
+		};
+		const previous = this.#lastPress;
+		this.#lastPress = press;
+		if (!isDoublePress(previous, press)) return false;
+		this.#lastPress = void 0;
+		return true;
+	}
+};
+
+//#endregion
+export { RangeEntry };
+//# sourceMappingURL=range-entry.js.map

package/dist/elements/range-entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-entry.js","names":[],"sources":["../../src/elements/range-entry.ts"],"sourcesContent":["interface Press {\n\ttime: number;\n\tx: number;\n\ty: number;\n}\n\ninterface RangeEntryOptions {\n\tcommit: (text: string) => void;\n\ttext: () => string;\n\ttoggle: (isOpen: boolean) => void;\n}\n\n// Not `dblclick`, which iOS may not deliver under `touch-action: none`\nconst doublePressMs = 500;\nconst doublePressPx = 4;\n\nfunction isDoublePress(previous: Press | undefined, next: Press): boolean {\n\tif (!previous) return false;\n\n\treturn (\n\t\tnext.time - previous.time < doublePressMs &&\n\t\tMath.hypot(next.x - previous.x, next.y - previous.y) < doublePressPx\n\t);\n}\n\nexport class RangeEntry {\n\tget isOpen(): boolean {\n\t\treturn this.#isOpen;\n\t}\n\n\treadonly #input: HTMLInputElement;\n\n\t#isOpen = false;\n\n\t#lastPress: Press | undefined;\n\n\treadonly #options: RangeEntryOptions;\n\n\tconstructor(input: HTMLInputElement, options: RangeEntryOptions) {\n\t\tthis.#input = input;\n\t\tthis.#options = options;\n\t}\n\n\tbind(control: HTMLElement, signal: AbortSignal): void {\n\t\tconst input = this.#input;\n\n\t\tinput.addEventListener(\n\t\t\t'keydown',\n\t\t\t(event) => {\n\t\t\t\tif (event.isComposing || (event.key !== 'Enter' && event.key !== 'Escape')) return;\n\n\t\t\t\tevent.preventDefault();\n\t\t\t\tthis.close(event.key === 'Enter');\n\t\t\t\tcontrol.focus();\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tinput.addEventListener(\n\t\t\t'blur',\n\t\t\t() => {\n\t\t\t\tthis.close(true);\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\n\t\t// The field's own events would reach the host's listeners as if the value had moved\n\t\tfor (const type of ['change', 'input']) {\n\t\t\tinput.addEventListener(\n\t\t\t\ttype,\n\t\t\t\t(event) => {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t},\n\t\t\t\t{ signal },\n\t\t\t);\n\t\t}\n\t\tsignal.addEventListener(\n\t\t\t'abort',\n\t\t\t() => {\n\t\t\t\tthis.close(false);\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\t}\n\n\t// Closes first, so the committed value renders with the control's role back in place\n\tclose(isCommitting: boolean): void {\n\t\tif (!this.#isOpen) return;\n\n\t\tthis.#isOpen = false;\n\t\tthis.#input.hidden = true;\n\t\tthis.#options.toggle(false);\n\t\tif (isCommitting) this.#options.commit(this.#input.value);\n\t}\n\n\tforgetPress(): void {\n\t\tthis.#lastPress = undefined;\n\t}\n\n\topen(): void {\n\t\tconst input = this.#input;\n\n\t\tthis.#isOpen = true;\n\t\tinput.value = this.#options.text();\n\t\tinput.hidden = false;\n\t\tthis.#options.toggle(true);\n\t\tinput.focus();\n\t\tinput.select();\n\t}\n\n\tpress(event: PointerEvent): boolean {\n\t\tconst press = { time: event.timeStamp, x: event.clientX, y: event.clientY };\n\t\tconst previous = this.#lastPress;\n\n\t\tthis.#lastPress = press;\n\t\tif (!isDoublePress(previous, press)) return false;\n\n\t\tthis.#lastPress = undefined;\n\n\t\treturn true;\n\t}\n}\n"],"mappings":";AAaA,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AAEtB,SAAS,cAAc,UAA6B,MAAsB;CACzE,IAAI,CAAC,UAAU,OAAO;CAEtB,OACC,KAAK,OAAO,SAAS,OAAO,iBAC5B,KAAK,MAAM,KAAK,IAAI,SAAS,GAAG,KAAK,IAAI,SAAS,CAAC,IAAI;AAEzD;AAEA,IAAa,aAAb,MAAwB;CACvB,IAAI,SAAkB;EACrB,OAAO,KAAK;CACb;CAEA,AAAS;CAET,UAAU;CAEV;CAEA,AAAS;CAET,YAAY,OAAyB,SAA4B;EAChE,KAAK,SAAS;EACd,KAAK,WAAW;CACjB;CAEA,KAAK,SAAsB,QAA2B;EACrD,MAAM,QAAQ,KAAK;EAEnB,MAAM,iBACL,YACC,UAAU;GACV,IAAI,MAAM,eAAgB,MAAM,QAAQ,WAAW,MAAM,QAAQ,UAAW;GAE5E,MAAM,eAAe;GACrB,KAAK,MAAM,MAAM,QAAQ,OAAO;GAChC,QAAQ,MAAM;EACf,GACA,EAAE,OAAO,CACV;EACA,MAAM,iBACL,cACM;GACL,KAAK,MAAM,IAAI;EAChB,GACA,EAAE,OAAO,CACV;EAGA,KAAK,MAAM,QAAQ,CAAC,UAAU,OAAO,GACpC,MAAM,iBACL,OACC,UAAU;GACV,MAAM,gBAAgB;EACvB,GACA,EAAE,OAAO,CACV;EAED,OAAO,iBACN,eACM;GACL,KAAK,MAAM,KAAK;EACjB,GACA,EAAE,MAAM,KAAK,CACd;CACD;CAGA,MAAM,cAA6B;EAClC,IAAI,CAAC,KAAK,SAAS;EAEnB,KAAK,UAAU;EACf,KAAK,OAAO,SAAS;EACrB,KAAK,SAAS,OAAO,KAAK;EAC1B,IAAI,cAAc,KAAK,SAAS,OAAO,KAAK,OAAO,KAAK;CACzD;CAEA,cAAoB;EACnB,KAAK,aAAa;CACnB;CAEA,OAAa;EACZ,MAAM,QAAQ,KAAK;EAEnB,KAAK,UAAU;EACf,MAAM,QAAQ,KAAK,SAAS,KAAK;EACjC,MAAM,SAAS;EACf,KAAK,SAAS,OAAO,IAAI;EACzB,MAAM,MAAM;EACZ,MAAM,OAAO;CACd;CAEA,MAAM,OAA8B;EACnC,MAAM,QAAQ;GAAE,MAAM,MAAM;GAAW,GAAG,MAAM;GAAS,GAAG,MAAM;EAAQ;EAC1E,MAAM,WAAW,KAAK;EAEtB,KAAK,aAAa;EAClB,IAAI,CAAC,cAAc,UAAU,KAAK,GAAG,OAAO;EAE5C,KAAK,aAAa;EAElB,OAAO;CACR;AACD"}

package/dist/elements/segmented.d.ts

@@ -0,0 +1,17 @@
+import { SonicElement } from "./sonic-element.js";
+//#region src/elements/segmented.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    'sonic-segmented': SonicSegmented;
+  }
+}
+export declare class SonicSegmented extends SonicElement {
+  #private;
+  static readonly observedAttributes: string[];
+  get value(): string;
+  set value(next: string);
+  attributeChangedCallback(name: string): void;
+  protected connect(signal: AbortSignal): void;
+}
+//#endregion
+//# sourceMappingURL=segmented.d.ts.map

package/dist/elements/segmented.js

@@ -0,0 +1,104 @@
+import { SonicElement } from "./sonic-element.js";
+import { template } from "../lib/render.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">
+			<span class="sonic-segmented-cap"></span>
+		</button>
+	`, HTMLButtonElement);
+const keySteps = /* @__PURE__ */ new Map([
+	["ArrowDown", 1],
+	["ArrowLeft", -1],
+	["ArrowRight", 1],
+	["ArrowUp", -1]
+]);
+function segmentValue(segment) {
+	return segment.querySelector("[data-sonic-value]")?.dataset.sonicValue;
+}
+var SonicSegmented = class extends SonicElement {
+	static observedAttributes = [...SonicElement.observedAttributes, "value"];
+	get value() {
+		return this.#value;
+	}
+	set value(next) {
+		this.#value = next;
+		this.#render();
+	}
+	#segmented = renderSegmented();
+	#value = "";
+	attributeChangedCallback(name) {
+		if (name === "value") this.#value = this.getAttribute("value") ?? "";
+		this.#render();
+	}
+	connect(signal) {
+		const segmented = this.#segmented;
+		this.upgradeProperty("value");
+		this.adoptChildren(() => {
+			const segments = [...this.querySelectorAll(":scope > [data-sonic-value]")];
+			const isReplaced = segmented.parentNode !== this;
+			if (isReplaced) segmented.replaceChildren();
+			for (const child of segments) {
+				const segment = renderSegment();
+				segment.firstElementChild?.append(child);
+				segmented.append(segment);
+			}
+			this.appendOnce(segmented);
+			if (isReplaced || segments.length > 0) this.#render();
+		}, signal);
+		this.#render();
+		this.checkStyles(segmented, "segmented.css");
+		segmented.addEventListener("click", (event) => {
+			const segment = this.#segmentOf(event.target);
+			if (segment) this.#select(segment);
+		}, { 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 });
+	}
+	#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];
+	}
+	#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.disabled;
+			segment.setAttribute("aria-checked", String(segment === checked));
+			segment.tabIndex = segment === focusable ? 0 : -1;
+		}
+		this.forwardNaming(segmented, true);
+	}
+	#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);
+	}
+	#select(segment) {
+		const next = segmentValue(segment);
+		if (next === void 0 || next === this.#value) return;
+		this.value = next;
+		this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+};
+
+//#endregion
+export { SonicSegmented };
+//# sourceMappingURL=segmented.js.map

package/dist/elements/segmented.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented.js","names":[],"sources":["../../src/elements/segmented.ts"],"sourcesContent":["import { SonicElement } from '#elements/sonic-element.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\nfunction segmentValue(segment: Element): string | undefined {\n\treturn segment.querySelector<HTMLElement | SVGElement>('[data-sonic-value]')?.dataset.sonicValue;\n}\n\nexport class SonicSegmented extends SonicElement {\n\tstatic override readonly observedAttributes = [...SonicElement.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\tthis.#value = next;\n\t\tthis.#render();\n\t}\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.upgradeProperty('value');\n\t\tthis.adoptChildren(() => {\n\t\t\tconst segments = [...this.querySelectorAll(':scope > [data-sonic-value]')];\n\t\t\tconst isReplaced = segmented.parentNode !== this;\n\n\t\t\t// Arrivals after a replacement take the old options' place\n\t\t\tif (isReplaced) segmented.replaceChildren();\n\t\t\tfor (const child of segments) {\n\t\t\t\tconst segment = renderSegment();\n\n\t\t\t\tsegment.firstElementChild?.append(child);\n\t\t\t\tsegmented.append(segment);\n\t\t\t}\n\t\t\tthis.appendOnce(segmented);\n\t\t\tif (isReplaced || segments.length > 0) this.#render();\n\t\t}, signal);\n\t\tthis.#render();\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\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\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\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#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.disabled;\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}\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":";;;;AASA,MAAM,kBAAkB,SACZ,yDACX,cACD;AAEA,MAAM,gBAAgB,SACV;;;;IAKX,iBACD;AAGA,MAAM,2BAAW,IAAI,IAAI;CACxB,CAAC,aAAa,CAAC;CACf,CAAC,aAAa,EAAE;CAChB,CAAC,cAAc,CAAC;CAChB,CAAC,WAAW,EAAE;AACf,CAAC;AAED,SAAS,aAAa,SAAsC;CAC3D,OAAO,QAAQ,cAAwC,oBAAoB,CAAC,EAAE,QAAQ;AACvF;AAEA,IAAa,iBAAb,cAAoC,aAAa;CAChD,OAAyB,qBAAqB,CAAC,GAAG,aAAa,oBAAoB,OAAO;CAG1F,IAAI,QAAgB;EACnB,OAAO,KAAK;CACb;CAEA,IAAI,MAAM,MAAc;EACvB,KAAK,SAAS;EACd,KAAK,QAAQ;CACd;CAEA,AAAS,aAAa,gBAAgB;CAEtC,SAAS;CAET,yBAAyB,MAAoB;EAC5C,IAAI,SAAS,SAAS,KAAK,SAAS,KAAK,aAAa,OAAO,KAAK;EAClE,KAAK,QAAQ;CACd;CAEA,AAAU,QAAQ,QAA2B;EAC5C,MAAM,YAAY,KAAK;EAEvB,KAAK,gBAAgB,OAAO;EAC5B,KAAK,oBAAoB;GACxB,MAAM,WAAW,CAAC,GAAG,KAAK,iBAAiB,6BAA6B,CAAC;GACzE,MAAM,aAAa,UAAU,eAAe;GAG5C,IAAI,YAAY,UAAU,gBAAgB;GAC1C,KAAK,MAAM,SAAS,UAAU;IAC7B,MAAM,UAAU,cAAc;IAE9B,QAAQ,mBAAmB,OAAO,KAAK;IACvC,UAAU,OAAO,OAAO;GACzB;GACA,KAAK,WAAW,SAAS;GACzB,IAAI,cAAc,SAAS,SAAS,GAAG,KAAK,QAAQ;EACrD,GAAG,MAAM;EACT,KAAK,QAAQ;EACb,KAAK,YAAY,WAAW,eAAe;EAE3C,UAAU,iBACT,UACC,UAAU;GACV,MAAM,UAAU,KAAK,WAAW,MAAM,MAAM;GAC5C,IAAI,SAAS,KAAK,QAAQ,OAAO;EAClC,GACA,EAAE,OAAO,CACV;EACA,UAAU,iBACT,YACC,UAAU;GACV,IAAI,MAAM,kBAAkB;GAE5B,MAAM,UAAU,KAAK,WAAW,MAAM,MAAM;GAC5C,MAAM,OAAO,WAAW,KAAK,WAAW,SAAS,MAAM,GAAG;GAC1D,IAAI,CAAC,MAAM;GAEX,MAAM,eAAe;GACrB,KAAK,QAAQ,IAAI;GACjB,KAAK,MAAM;EACZ,GACA,EAAE,OAAO,CACV;CACD;CAEA,WAAW,SAA4B,KAA4C;EAClF,MAAM,WAAW,KAAK,UAAU;EAEhC,IAAI,QAAQ,QAAQ,OAAO,SAAS;EACpC,IAAI,QAAQ,OAAO,OAAO,SAAS,GAAG,EAAE;EAExC,MAAM,OAAO,SAAS,IAAI,GAAG;EAC7B,IAAI,SAAS,QAAW,OAAO;EAI/B,OAAO,UAFO,SAAS,QAAQ,OAAO,IAAI,OAEjB,SAAS,UAAU,SAAS;CACtD;CAEA,UAAgB;EACf,MAAM,YAAY,KAAK;EACvB,MAAM,WAAW,KAAK,UAAU;EAChC,MAAM,UAAU,SAAS,MAAM,YAAY,aAAa,OAAO,MAAM,KAAK,MAAM;EAChF,MAAM,YAAY,WAAW,SAAS;EAEtC,KAAK,MAAM,WAAW,UAAU;GAC/B,QAAQ,WAAW,KAAK;GACxB,QAAQ,aAAa,gBAAgB,OAAO,YAAY,OAAO,CAAC;GAChE,QAAQ,WAAW,YAAY,YAAY,IAAI;EAChD;EACA,KAAK,cAAc,WAAW,IAAI;CACnC;CAEA,WAAW,QAA2D;EACrE,IAAI,EAAE,kBAAkB,UAAU,OAAO;EAEzC,MAAM,UAAU,OAAO,QAAQ,0BAA0B;EAEzD,OAAO,mBAAmB,qBAAqB,QAAQ,kBAAkB,KAAK,aAC3E,UACA;CACJ;CAEA,YAAsC;EACrC,OAAO,CAAC,GAAG,KAAK,WAAW,QAAQ,CAAC,CAAC,QACnC,UAAsC,iBAAiB,iBACzD;CACD;CAEA,QAAQ,SAAkC;EACzC,MAAM,OAAO,aAAa,OAAO;EACjC,IAAI,SAAS,UAAa,SAAS,KAAK,QAAQ;EAEhD,KAAK,QAAQ;EACb,KAAK,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC;CAC1D;AACD"}

package/dist/elements/slider.d.ts

@@ -0,0 +1,15 @@
+import { SonicRangeElement } from "./range-element.js";
+//#region src/elements/slider.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    'sonic-slider': SonicSlider;
+  }
+}
+export declare class SonicSlider extends SonicRangeElement {
+  #private;
+  static readonly observedAttributes: string[];
+  protected connect(signal: AbortSignal): void;
+  protected render(): void;
+}
+//#endregion
+//# sourceMappingURL=slider.d.ts.map