@xsynaptic/sonic-ui 0.24.0 → 0.25.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @xsynaptic/sonic-ui
 
+## 0.25.1
+
+### Patch Changes
+
+- `formatClock` writes a time that is not finite (a duration not yet known, a live stream's) as an empty string, where it wrote `NaN:NaN`.
+
+## 0.25.0
+
+### Minor Changes
+
+- - `<sonic-region>`: an editable region, a child of a wave strip, drawn as a bracket and registered by `./define/region` with `region.css`. A drag of its body or a key moves it and keeps its length. It has `start`, `end`, `kind`, `name` (submitting `name.start` and `name.end`) and `disabled`, speaks its start, carries `:state(dragging)`, and fires `input` and `change`, which bubble through the strip.
+  - Region surface: tokens `--sonic-region-bracket`, `--sonic-region-fill`, `--sonic-region-bracket-width` and `--sonic-region-bracket-radius`; hook classes `.sonic-wavestrip-regions`, `.sonic-region` and `.sonic-region-bracket`; `data-sonic-clipped` on a region written past a bound.
+  - Wave strip: `formatSpokenRegion(start, end)` words what a region speaks, and `preview` draws a time as a scrub's edge without scrubbing to it.
+  - Wave strip and waveform: `valueFromPoint(clientX, clientY)` is the inverse of `clientXOf`.
+  - Wave strip, breaking: the slider role, the tab stop and the focus glow are on `.sonic-wavestrip-canvas`, so `.sonic-wavestrip:focus-visible` no longer matches (`:focus-within` does).
+- - XY pad and envelope: the arcs round a held puck or handle are the reticle. Breaking: `.sonic-xy-bracket` is `.sonic-xy-reticle`, `.sonic-envelope-bracket` is `.sonic-envelope-reticle`, and `material/bracket.css` is `material/reticle.css`.
+- - Waveform: `clientXOf(seconds)` is the viewport x where a time was last drawn, as on the wave strip, so a layer over the wave follows a paged window and a drag. The x is not clamped to the window.
+  - Wave strip and waveform: `markersFromPoint(clientX, clientY)` lists the markers at a point, nearest first.
+  - Wave strip: `renderMarker(marker, element)` draws a point marker; the element lasts until the next `markers` or `renderMarker` write.
+  - Waveform: a marker outside the bounds paints its line at the bound.
+  - Wave strip: `--sonic-wave` is renamed `--sonic-unplayed`, beside `--sonic-buffered` and `--sonic-scrub`. Breaking for a skin or host that sets it.
+
+### Patch Changes
+
+- Older browsers, down to Chrome 111, Safari 16.4 and Firefox 128: the built sheets carry vendor prefixes (`-webkit-mask`, `-webkit-user-select`), shading no longer needs relative colour, a dial's scale and the XY pad's lines no longer need the `cap` unit or `sign()`, and typed entry stays shut without the popover API. With no skin, glass follows `Canvas`: an off-white in light, the engine's dark canvas in dark.
+
+## 0.24.1
+
+### Patch Changes
+
+- Older browsers: controls connect without custom states or `Intl.DurationFormat`, a `<label>` without an id is given one where `ariaLabelledByElements` is missing, the readout and typed entry stay shut without anchor positioning, and the shipped sheets no longer use CSS nesting or `sign()`.
+
 ## 0.24.0
 
 ### Minor Changes
@@ -23,8 +55,8 @@
 
 - - `--sonic-entry-selection` colours the selected text of a typed entry, which opens with its value selected. Unset, it stays the control's lit colour.
   - `--sonic-slider-groove-hover-delay` is how long a slider's groove waits under a pointer before it thickens to `--sonic-slider-groove-hover-ratio`. A press or a keyboard focus thickens it at once and leaving thins it at once. Unset, there is no wait.
-  - `--sonic-readout-depth` scales a readout's cast shadow, inner shine and lighter centre from 0 to 1. Unset, it follows the relief.
-  - Behaviour change: a readout no longer takes `--sonic-glass-depth` from a screen around it. Inside a screen flattened with `--sonic-glass-depth: 0` its centre follows the relief again, as its shadow always did; set `--sonic-readout-depth: 0` to flatten it.
+  - `--sonic-readout-depth` scales a readout's cast shadow, inner shine and lighter center from 0 to 1. Unset, it follows the relief.
+  - Behaviour change: a readout no longer takes `--sonic-glass-depth` from a screen around it. Inside a screen flattened with `--sonic-glass-depth: 0` its center follows the relief again, as its shadow always did; set `--sonic-readout-depth: 0` to flatten it.
 
 ## 0.21.0
 

package/README.md

@@ -43,6 +43,7 @@ import '@xsynaptic/sonic-ui/define';
 - The split is the one host with a box: `<sonic-split>` is inline until given a display, and laying it out is yours.
 - Register the classes under their stock tag names (`sonic-dial`, `sonic-split`). The sheets and the split key on them, so a split under another tag finds no members.
 - Name every control with `aria-label` or `aria-labelledby` on the host, or with a `<label>` for a form-associated one.
+- Every control that holds a value the user sets is form-associated, as a native input is, and that is deliberate: given a `name` it submits, a form reset returns it to its attributes, a disabled `<fieldset>` disables it, and a `<label>` names it. With no `name` it submits nothing. A value control submits its number and a segmented control its value; a latching button, and a switch or toggle with two positions, submit their `value` only while on, as a checkbox does; an XY pad and a region submit two fields (`name.x` and `name.y`, `name.start` and `name.end`). A momentary button, the displays, the envelope and the split submit nothing.
 - A boolean attribute is on when present, whatever its value, so `pressed="false"` latches a button. From a framework pass `undefined`, never `false`.
 - A control uses only the children it documents and adds one child of its own. Children it draws are copied, so a copy has none of your listeners; keep them static. Under a hydrating framework, register the definitions once hydration is done (in React, from an effect).
 - Events bubble and carry no detail: read the property when one fires. A control knows nothing about playback, so wire its events to your own state and write the property back.
@@ -75,11 +76,12 @@ A skin is one rule that sets tokens on a class; copy `dist/skins/flat.css` to st
 | --------------- | ----------------------------------------------- |
 | `button.css`    | core, cap, well, keycap                         |
 | `dial.css`      | core, cap, glass, readout, value, arc, scale    |
-| `envelope.css`  | core, glass, readout, bracket                   |
+| `envelope.css`  | core, glass, readout, reticle                   |
 | `led.css`       | core, lens                                      |
 | `meter.css`     | core, lens, groove                              |
 | `number.css`    | core, cap, value                                |
 | `panel.css`     | core                                            |
+| `region.css`    | core, cap                                       |
 | `ring.css`      | core, arc                                       |
 | `screen.css`    | core, glass, pane, well                         |
 | `segmented.css` | core, cap, well, keycap                         |
@@ -89,8 +91,8 @@ A skin is one rule that sets tokens on a class; copy `dist/skins/flat.css` to st
 | `toggle.css`    | core, cap, well, keycap                         |
 | `waveform.css`  | core, cap, glass, readout, value                |
 | `wavestrip.css` | core, cap, glass, readout, value                |
-| `xy.css`        | core, cap, glass, readout, bracket              |
+| `xy.css`        | core, cap, glass, readout, reticle              |
 
 An LED inside a control also needs `led.css`, and a button inside a ring needs `button.css`. Only a missing `core.css` or control sheet is warned about, so check a control that draws wrong against this table.
 
-Targets current Chrome and Edge, Safari 26 and Firefox 147. No control mirrors for right-to-left. MIT licensed.
+Tested in current Chrome, Firefox and Safari. Known to work from Chrome 111, Safari 16.4 and Firefox 128; older versions are best effort. No control mirrors for right-to-left. MIT licensed.

package/dist/default/define/region.js

@@ -0,0 +1,7 @@
+import { defineOnce } from "../elements/define-once.js";
+import { SonicRegion } from "../elements/region.js";
+
+//#region src/define/region.ts
+defineOnce("sonic-region", SonicRegion);
+
+//#endregion

package/dist/default/define.js

@@ -3,6 +3,7 @@ import "./define/dial.js";
 import "./define/envelope.js";
 import "./define/meter.js";
 import "./define/number.js";
+import "./define/region.js";
 import "./define/segmented.js";
 import "./define/slider.js";
 import "./define/spectrum.js";

package/dist/default/elements/envelope.js

@@ -36,7 +36,7 @@ function stageParts(envelope, hook, stages) {
 }
 const renderEnvelope = template(`
 		<div class="sonic-envelope" aria-hidden="true">
-			<div class="sonic-envelope-bracket"></div>
+			<div class="sonic-envelope-reticle"></div>
 			<svg class="sonic-envelope-graph" preserveAspectRatio="none" viewBox="0 0 1 1">
 				<path class="sonic-envelope-fill" />
 				<rect class="sonic-envelope-fill sonic-envelope-floor" y="1" />
@@ -123,11 +123,10 @@ var SonicEnvelope = class extends SonicElement {
 		this.reflect("sustain", id);
 	}
 	#bindings = /* @__PURE__ */ new Map();
-	#envelope = renderEnvelope();
-	#bracket = requireChild(this.#envelope, ".sonic-envelope-bracket", HTMLDivElement);
 	#claim = new ReadoutClaim(() => {
 		this.#renderReadout();
 	});
+	#envelope = renderEnvelope();
 	#curveHandles = stageParts(this.#envelope, "sonic-envelope-curve", curveStages);
 	#fill = requireChild(this.#envelope, ".sonic-envelope-fill", SVGElement);
 	#floor = requireChild(this.#envelope, ".sonic-envelope-floor", SVGElement);
@@ -138,6 +137,7 @@ var SonicEnvelope = class extends SonicElement {
 	#isDriving = false;
 	#line = requireChild(this.#envelope, ".sonic-envelope-line", SVGElement);
 	#readout = new Readout(requireChild(this.#envelope, ".sonic-envelope-readout", HTMLDivElement));
+	#reticle = requireChild(this.#envelope, ".sonic-envelope-reticle", HTMLDivElement);
 	#shape = adsrShape({});
 	#waiting = /* @__PURE__ */ new Set();
 	#warned = /* @__PURE__ */ new Set();
@@ -229,15 +229,9 @@ var SonicEnvelope = class extends SonicElement {
 			at: shape.curveHandles.find((point) => point.stage === stage),
 			drives: this.#curveDrives(stage)
 		});
-		this.#drawBracket();
+		this.#drawReticle();
 		this.#renderReadout();
 	}
-	#drawBracket() {
-		const part = this.#held;
-		if (!part) return;
-		for (const name of ["--_sonic-envelope-x", "--_sonic-envelope-y"]) this.#bracket.style.setProperty(name, part.style.getPropertyValue(name));
-		writeAttribute(this.#bracket, "data-sonic-part", part.classList.contains("sonic-envelope-curve") ? "curve" : void 0);
-	}
 	#drawPoint(part, point) {
 		const { at, drives } = point;
 		writeAttribute(part, "hidden", at ? void 0 : "");
@@ -248,6 +242,12 @@ var SonicEnvelope = class extends SonicElement {
 		writeAttribute(part, "data-sonic-axes", drives.map(({ axis }) => axis).join(""));
 		writeAttribute(part, "data-sonic-disabled", isStill ? "" : void 0);
 	}
+	#drawReticle() {
+		const part = this.#held;
+		if (!part) return;
+		for (const name of ["--_sonic-envelope-x", "--_sonic-envelope-y"]) this.#reticle.style.setProperty(name, part.style.getPropertyValue(name));
+		writeAttribute(this.#reticle, "data-sonic-part", part.classList.contains("sonic-envelope-curve") ? "curve" : void 0);
+	}
 	#drives(stage) {
 		const x = this.#bindings.get(stage);
 		const y = stage === "decay" ? this.#bindings.get("sustain") : void 0;
@@ -263,7 +263,7 @@ var SonicEnvelope = class extends SonicElement {
 		const pressed = this.#pressed(event);
 		if (!pressed || pressed.drives.length === 0) return void 0;
 		this.#held = pressed.part;
-		this.#drawBracket();
+		this.#drawReticle();
 		const box = this.#graph.getBoundingClientRect();
 		const travel = {
 			x: Math.max(1, box.width * this.#shape.share),

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

@@ -47,6 +47,16 @@ var SonicFormElement = class extends SonicElement {
 		if (!internals || this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby")) return [];
 		return [...internals.labels].filter((label) => label instanceof Element);
 	}
+	writeFormFields(fields, state) {
+		const { name } = this;
+		if (name === "") {
+			this.writeFormValue(null, state);
+			return;
+		}
+		const data = new FormData();
+		for (const [field, value] of fields) data.set(`${name}.${field}`, String(value));
+		this.writeFormValue(data, state);
+	}
 	writeFormValue(value, state) {
 		this.internals?.setFormValue(value, `${this.localName}:${state}`);
 	}

package/dist/default/elements/readout.js

@@ -2,6 +2,7 @@ import { requireChild } from "../lib/render.js";
 
 //#region src/elements/readout.ts
 const canPopover = "togglePopover" in HTMLElement.prototype;
+const isUnanchored = !CSS.supports("anchor-name", "--a");
 let readoutCount = 0;
 var Readout = class {
 	#anchor;
@@ -27,9 +28,9 @@ var Readout = class {
 		this.#toggle(isOpen);
 	}
 	#toggle(isOpen) {
-		if (canPopover && this.#bubble.isConnected) this.#bubble.togglePopover(isOpen);
+		if (canPopover && !isUnanchored && this.#bubble.isConnected) this.#bubble.togglePopover(isOpen);
 	}
 };
 
 //#endregion
-export { Readout };
+export { Readout, isUnanchored };

package/dist/default/elements/region-layer.js

@@ -0,0 +1,251 @@
+import { writeAttribute } from "../lib/write-attribute.js";
+import { placeChildren, template } from "../lib/render.js";
+import { capturePointer } from "../lib/pointer-drag.js";
+import { dragThresholdPx } from "../lib/drag-step.js";
+import { focusByPointer } from "../lib/focus-by-pointer.js";
+import { SonicRegion, linkRegion, ownRegions } from "./region.js";
+import { writeKind } from "../lib/marker-band.js";
+import { moveRegionTo, regionAt, regionTravel, startRegionDrag, stepRegionDrag } from "../lib/region-drag.js";
+
+//#region src/elements/region-layer.ts
+const renderPart = template(`
+		<div class="sonic-region" role="slider" aria-orientation="horizontal">
+			<div class="sonic-region-bracket"></div>
+		</div>
+	`, HTMLDivElement);
+function hasMoved(from, to) {
+	return from.start !== to.start || from.end !== to.end;
+}
+function clippedEnds(region, [low, high]) {
+	const ends = [...Math.min(region.start, region.end) < low ? ["start"] : [], ...Math.max(region.start, region.end) > high ? ["end"] : []];
+	return ends.length > 0 ? ends.join(" ") : void 0;
+}
+function writeProperty(part, name, value) {
+	if (part.style.getPropertyValue(name) !== value) part.style.setProperty(name, value);
+}
+var RegionLayer = class {
+	#drawn = [];
+	#held;
+	#host;
+	#key;
+	#keyScrub;
+	constructor(host, signal) {
+		const render = () => {
+			this.render();
+		};
+		const observer = new MutationObserver(render);
+		this.#host = host;
+		this.#bindPointer(signal);
+		this.#bindKeys(signal);
+		observer.observe(host.element, { childList: true });
+		ownRegions(host.element, (region) => {
+			this.#redraw(region);
+		}, signal);
+		signal.addEventListener("abort", () => {
+			observer.disconnect();
+			this.#release();
+			this.#endKeyScrub();
+		}, { once: true });
+	}
+	abandon() {
+		this.#release(true);
+	}
+	follow() {
+		if (this.#stripKey() !== this.#key) this.render();
+	}
+	isHeld() {
+		return this.#held !== void 0;
+	}
+	render() {
+		const host = this.#host;
+		const drawn = [...host.element.children].filter((child) => child instanceof SonicRegion).map((region) => this.#draw(region));
+		this.#drawn = drawn;
+		this.#key = this.#stripKey();
+		placeChildren(host.layer, drawn.map(({ part }) => part));
+		this.#dropGone();
+	}
+	take(event) {
+		const host = this.#host;
+		const { startPx, travelPx } = host.axis();
+		const mapping = host.mapping();
+		const index = regionAt(this.#drawn.map((entry) => {
+			if (!this.#isEnabled(entry)) return;
+			const { end, start } = entry.link.span();
+			return [mapping.proportionOf(start) * travelPx, mapping.proportionOf(end) * travelPx];
+		}), event.clientX - startPx);
+		const pressed = index === void 0 ? void 0 : this.#drawn[index];
+		if (!pressed) return false;
+		this.#endKeyScrub();
+		const from = pressed.link.span();
+		this.#held = {
+			drawn: pressed,
+			from,
+			outside: host.outside(),
+			pointerId: event.pointerId,
+			press: event,
+			state: startRegionDrag({
+				from,
+				position: event.clientX,
+				thresholdPx: dragThresholdPx(event.pointerType),
+				widthPx: travelPx
+			})
+		};
+		pressed.link.hold("pointer");
+		capturePointer(host.control, event.pointerId);
+		return true;
+	}
+	#bindKeys(signal) {
+		const { layer } = this.#host;
+		layer.addEventListener("keydown", (event) => {
+			const entry = this.#drawn.find(({ part }) => part === event.target);
+			if (!entry || event.defaultPrevented || this.#held) return;
+			if (this.#isEnabled(entry)) this.#keyTo(entry, event);
+		}, { signal });
+		layer.addEventListener("keyup", (event) => {
+			if (event.key === "Meta" || event.key === this.#keyScrub?.key) this.#endKeyScrub();
+		}, { signal });
+		layer.addEventListener("focusin", () => {
+			this.render();
+		}, { signal });
+		layer.addEventListener("focusout", () => {
+			this.#endKeyScrub();
+		}, { signal });
+	}
+	#bindPointer(signal) {
+		const whileHeld = (type, handle) => {
+			this.#host.control.addEventListener(type, (event) => {
+				const held = this.#held;
+				if (held && event instanceof PointerEvent && held.pointerId === event.pointerId) handle(held, event);
+			}, { signal });
+		};
+		whileHeld("pointermove", (hold, event) => {
+			this.#dragTo(hold, event);
+		});
+		whileHeld("pointerup", (hold) => {
+			const isPress = !hold.state.isEngaged;
+			this.#release();
+			if (isPress) this.#host.seek(hold.press);
+		});
+		whileHeld("pointercancel", () => {
+			this.#release(true);
+		});
+		whileHeld("lostpointercapture", () => {
+			this.#release();
+		});
+	}
+	#dragTo(hold, event) {
+		const wasEngaged = hold.state.isEngaged;
+		const { span, state } = stepRegionDrag(this.#host.mapping(), hold.state, {
+			isFine: event.shiftKey,
+			position: event.clientX
+		});
+		hold.state = state;
+		if (!span) return;
+		if (!wasEngaged) focusByPointer(hold.drawn.part);
+		hold.drawn.link.input(hold.outside?.(event) === true ? hold.from : span);
+	}
+	#draw(region) {
+		const host = this.#host;
+		const known = this.#drawn.find((entry) => entry.region === region);
+		const entry = known ?? {
+			kind: void 0,
+			link: linkRegion(region),
+			part: renderPart(),
+			region
+		};
+		const { link, part } = entry;
+		const mapping = host.mapping();
+		const span = link.span();
+		const [low, high] = regionTravel(span, mapping.bounds);
+		const canMove = this.#isEnabled(entry);
+		writeProperty(part, "--_sonic-region-from", String(mapping.proportionOf(span.start)));
+		writeProperty(part, "--_sonic-region-to", String(mapping.proportionOf(span.end)));
+		if (!known || entry.kind !== region.kind) {
+			entry.kind = region.kind;
+			writeKind(part, region.kind, "--_sonic-ink");
+		}
+		writeAttribute(part, "data-sonic-clipped", clippedEnds(region, mapping.bounds));
+		writeAttribute(part, "aria-valuemin", String(low));
+		writeAttribute(part, "aria-valuemax", String(high));
+		writeAttribute(part, "aria-valuenow", String(span.start));
+		writeAttribute(part, "aria-valuetext", host.speak(span));
+		writeAttribute(part, "aria-disabled", canMove ? void 0 : "true");
+		writeAttribute(part, "tabindex", canMove ? "0" : void 0);
+		link.draw(part);
+		return entry;
+	}
+	#dropGone() {
+		const isGone = (entry) => !this.#drawn.includes(entry) || !this.#isEnabled(entry);
+		if (this.#held && isGone(this.#held.drawn)) this.#release();
+		if (this.#keyScrub && isGone(this.#keyScrub.drawn)) this.#endKeyScrub();
+	}
+	#endKeyScrub() {
+		const scrub = this.#keyScrub;
+		if (!scrub) return;
+		const { link } = scrub.drawn;
+		this.#keyScrub = void 0;
+		link.hold(void 0);
+		if (hasMoved(scrub.from, link.span())) link.change();
+	}
+	#isEnabled({ link }) {
+		return !this.#host.isDisabled() && !link.isDisabled();
+	}
+	#keyTo(entry, event) {
+		const mapping = this.#host.mapping();
+		const from = entry.link.span();
+		const start = mapping.keyTarget(event.key, from.start);
+		if (start === void 0) return;
+		event.preventDefault();
+		const next = moveRegionTo(mapping, from, start);
+		if (!event.repeat) {
+			this.#endKeyScrub();
+			if (entry.link.input(next)) entry.link.change();
+			return;
+		}
+		if (this.#keyScrub?.drawn !== entry || this.#keyScrub.key !== event.key) {
+			this.#endKeyScrub();
+			this.#keyScrub = {
+				drawn: entry,
+				from,
+				key: event.key
+			};
+			entry.link.hold("keys");
+		}
+		entry.link.input(next);
+	}
+	#redraw(region) {
+		if (this.#drawn.every((entry) => entry.region !== region)) {
+			this.render();
+			return;
+		}
+		this.#draw(region);
+		this.#dropGone();
+	}
+	#release(isRestored = false) {
+		const hold = this.#held;
+		if (!hold) return;
+		const { link } = hold.drawn;
+		this.#held = void 0;
+		if (isRestored) link.input(hold.from);
+		link.hold(void 0);
+		if (hasMoved(hold.from, link.span())) link.change();
+	}
+	#stripKey() {
+		const host = this.#host;
+		const mapping = host.mapping();
+		const [low, high] = mapping.bounds;
+		return [
+			low,
+			high,
+			mapping.proportionOf((low + high) / 2),
+			host.isDisabled(),
+			host.speak({
+				end: high,
+				start: high
+			})
+		].join("|");
+	}
+};
+
+//#endregion
+export { RegionLayer };

package/dist/default/elements/region.js

@@ -0,0 +1,157 @@
+import { SonicFormElement } from "./form-element.js";
+
+//#region src/elements/region.ts
+const owners = /* @__PURE__ */ new WeakMap();
+let link;
+function linkRegion(element) {
+	return link(element);
+}
+function ownRegions(host, changed, signal) {
+	owners.set(host, changed);
+	signal.addEventListener("abort", () => {
+		if (owners.get(host) === changed) owners.delete(host);
+	}, { once: true });
+}
+var SonicRegion = class extends SonicFormElement {
+	static observedAttributes = [
+		...SonicFormElement.observedAttributes,
+		"end",
+		"kind",
+		"name",
+		"start"
+	];
+	static {
+		link = (element) => ({
+			change: () => {
+				element.#report("change");
+			},
+			draw: (part) => {
+				element.#draw(part);
+			},
+			hold: (by) => {
+				element.#held = by;
+				element.toggleState("dragging", by === "pointer");
+			},
+			input: (span) => element.#input(span),
+			isDisabled: () => element.isDisabled(),
+			span: () => {
+				const { end, start } = element.#span;
+				return {
+					end: Math.max(start, end),
+					start: Math.min(start, end)
+				};
+			}
+		});
+	}
+	get dragging() {
+		return this.hasState("dragging");
+	}
+	get end() {
+		return this.#span.end;
+	}
+	set end(next) {
+		if (!this.#held) this.reflect("end", next);
+	}
+	/** Lowercase letters, digits and hyphens; colours the region through `--sonic-marker-<kind>` */
+	get kind() {
+		return this.getAttribute("kind") ?? void 0;
+	}
+	set kind(kind) {
+		this.reflect("kind", kind);
+	}
+	get start() {
+		return this.#span.start;
+	}
+	set start(next) {
+		if (!this.#held) this.reflect("start", next);
+	}
+	#formState = "";
+	#held;
+	#part;
+	#span = {
+		end: 0,
+		start: 0
+	};
+	attributeChangedCallback(name) {
+		const isSpan = name === "end" || name === "start";
+		if (isSpan && this.#held) return;
+		if (isSpan) this.#readSpan(name);
+		this.render();
+	}
+	connectedCallback() {
+		this.upgradeProperties("end", "kind", "start");
+		super.connectedCallback();
+	}
+	formResetCallback() {
+		if (this.#held) return;
+		this.#readSpan("start");
+		this.#readSpan("end");
+		this.render();
+	}
+	connect() {
+		this.render();
+		if (this.parentElement?.localName !== "sonic-wavestrip");
+	}
+	focusTarget() {
+		return this.#part;
+	}
+	render() {
+		if (!this.isBound() || !this.parentElement) return;
+		owners.get(this.parentElement)?.(this);
+	}
+	restoreState(state) {
+		const [start = NaN, end = NaN] = state.split(",").map(Number);
+		if (!Number.isFinite(start) || !Number.isFinite(end)) return;
+		this.#span = {
+			end,
+			start
+		};
+		this.render();
+	}
+	#draw(part) {
+		this.#part = part;
+		this.forwardNaming(part, true);
+		this.#writeForm();
+	}
+	#input(span) {
+		const hasMoved = span.start !== this.#span.start || span.end !== this.#span.end;
+		if (hasMoved) {
+			this.#span = span;
+			this.render();
+			this.#report("input");
+		}
+		return hasMoved;
+	}
+	#readSpan(name) {
+		const { end, start } = this.#span;
+		if (name === "end") {
+			this.#span = {
+				end: this.numberAttribute("end", start),
+				start
+			};
+			return;
+		}
+		const next = this.numberAttribute("start", 0);
+		this.#span = {
+			end: this.hasAttribute("end") ? end : next,
+			start: next
+		};
+	}
+	#report(type) {
+		this.dispatchEvent(new Event(type, {
+			bubbles: true,
+			composed: type === "input"
+		}));
+	}
+	#writeForm() {
+		const { end, start } = this.#span;
+		const state = `${String(start)},${String(end)}`;
+		const formState = `${this.name}=${state}`;
+		if (formState === this.#formState) return;
+		this.#formState = formState;
+		this.writeFormFields([["start", start], ["end", end]], state);
+	}
+};
+
+//#endregion
+export { SonicRegion, linkRegion, ownRegions };