@xsynaptic/sonic-ui 0.10.4 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @xsynaptic/sonic-ui
 
+## 0.12.0
+
+### Minor Changes
+
+- Wave controls: `requestPeaks` may return one promise or an iterable of them, each repainting once however often it is returned, and its `PeaksRequest` type is exported. A write to `pending` or `peaks` inside the call no longer asks again for the same window, and `pending` ignores an unchanged list. The waveform now asks when its window moves, its data is written or a promise settles, not on every repaint. `<sonic-wavestrip>` gains `clientXOf(value)`, the viewport x where a value sits.
+
+## 0.11.0
+
+### Minor Changes
+
+- - Breaking: lit colours take status names. `data-sonic-lit` values `alt`, `hot`, `clip` and `dim` are now `ok`, `warning`, `danger` and `idle`; `--sonic-lit-alt`, `--sonic-hot` and `--sonic-clip` are now `--sonic-lit-ok`, `--sonic-lit-warning` and `--sonic-lit-danger`. A meter's and a spectrum's hot and clip zones keep their names and draw in the warning and danger colours.
+  - Toggle: new `<sonic-toggle>`, a round cap sliding in a well, two or three positions or on/off, with lit, momentary and disabled positions and an optional LED or icon on the cap.
+  - Segmented control and switch: `data-sonic-disabled` on a position child disables that one position; arrows skip it, a press and the bat pass it by. A disabled switch position's label is drawn faint, which also dims the labels of a wholly disabled switch.
+  - Switch: a press on the rest label of a two-position switch holds its momentary position instead of latching it.
+  - Button and segmented control: a held Space shows the press in Firefox. `data-sonic-pressed` marks a part held by a key as well as by a pointer.
+  - Segmented control: on a skin whose ink is dark the chosen legend is drawn in the ink, so it reads on a light cap; the lit well still marks the choice.
+
 ## 0.10.4
 
 ### Patch Changes

package/README.md

@@ -29,25 +29,14 @@ Under a hydrating framework, register the definitions once hydration is done (in
 
 ## Wave controls
 
-`<sonic-wavestrip>` is the overview of a track, scrubbed to seek; `<sonic-waveform>` is the close-up that scrolls under a fixed playhead. Both are value controls in seconds (`min`, `max`, `step`, `value`) and take their data as properties.
+`<sonic-wavestrip>` is the overview of a track, scrubbed to seek; `<sonic-waveform>` is the close-up that scrolls under a fixed playhead. Both are value controls in seconds that take their data as properties (`peaks`, `markers`); the types list the rest.
 
-|  | Both | Wave strip | Waveform |
-| --- | --- | --- | --- |
-| Attributes | `fill`, `readout`, `disabled`, `dimmed` | `cancellable` | `playing`, `playback-rate`, `zoom`, `pending-delay`, `reduced-motion` |
-| Properties | `markers`, `currentMarker`, `formatValue`, `formatSpokenValue`, `repaint()` | `peaks`, `buffered` | `peaks`, `pending`, `readTime`, `requestPeaks` |
-| Gesture, read only | `dragging`, `revealed`, `cancelling`, `pointerType` | `hoverValue` |  |
-| Events, all bubbling | `input`, `change`, `sonic-reveal`, `sonic-marker` | `sonic-hover` |  |
-| States | `dragging`, `revealed`, `cancelling`, `editing`, `empty` |  | `pending` |
-| Hook classes |  | `sonic-wavestrip`, `-canvas`, `-markers`, `-marker`, `-region`, `-readout`, `-entry` | `sonic-waveform`, `-canvas`, `-scrim`, `-playhead`, `-ghost`, `-label`, `-readout`, `-entry` |
+Their events bubble and carry no detail, so read the property when one fires: `revealed` on `sonic-reveal`, `currentMarker` on `sonic-marker`, and the strip's `hoverValue` on `sonic-hover`, which `clientXOf(value)` turns into a viewport x.
 
-The events carry no detail; read the properties when one fires. `sonic-reveal` reports `revealed` changing, and a drag crossing the cancel zone reports through it or through `input`.
+The strip draws one part per marker inside `.sonic-wavestrip-markers`, in `start` order: a `.sonic-wavestrip-marker` dot, or a `.sonic-wavestrip-region` when the marker has an `end`. Marker labels are hidden from assistive technology; fold `currentMarker` into `formatSpokenValue` to have one spoken.
 
-A marker is `{ start, end?, label?, kind?, dimmed? }`; `markers` reads back sorted by `start`. The strip's `.sonic-wavestrip-markers` holds one part per marker in that order, a `.sonic-wavestrip-marker` dot or, with an `end`, a `.sonic-wavestrip-region`, so a dot's box gives the row it was laid on.
+The waveform calls `requestPeaks(fromSeconds, toSeconds)` as its window moves, often every frame, so return at once for a span already loaded or on its way. Return a promise, or several, and the waveform repaints as each settles; an `async` function is the wrong shape, since it hands back a new settled promise each call. `pending` is yours to keep: list the spans being fetched, and clear each as it lands.
 
-Marker labels are drawn parts and hidden from assistive technology. To speak the current marker with the time, fold `currentMarker` into `formatSpokenValue`; to announce it during playback, feed a live region of your own from `sonic-marker`.
-
-`requestPeaks(fromSeconds, toSeconds)` is called whenever the window the waveform wants moves, often every frame, so it should return at once for a span already loaded or on its way. Return a promise and the waveform repaints when it settles, resolved or rejected. `peaks` holds no record of what has loaded, so `pending` stays yours: list the spans you are fetching, and clear them as each lands.
-
-Sizes are ratios of the control's own size (`--sonic-wavestrip-size`, `--sonic-waveform-size`). Where a `fill` control should keep an absolute length, these override their ratios: `--sonic-wavestrip-marker-size`, `--sonic-wavestrip-groove-size`, `--sonic-waveform-label-font-size`, `--sonic-waveform-label-inset-inline` and `--sonic-waveform-label-inset-block`. `--sonic-waveform-label-line-height` defaults to 1.
+With `fill` a control takes its container's height and its ratios follow. `--sonic-wavestrip-marker-size`, `--sonic-wavestrip-groove-size` and `--sonic-waveform-label-font-size` hold an absolute length instead.
 
 Targets current Chrome and Edge, Safari 26 and Firefox 147. MIT licensed.

package/dist/default/define/toggle.js

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

package/dist/default/define.js

@@ -8,6 +8,7 @@ import "./define/slider.js";
 import "./define/spectrum.js";
 import "./define/split.js";
 import "./define/switch.js";
+import "./define/toggle.js";
 import "./define/waveform.js";
 import "./define/wavestrip.js";
 import "./define/xy.js";

package/dist/default/elements/button.js

@@ -2,6 +2,7 @@ import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
 import { copyNode } from "../lib/copy-node.js";
 import { bindHold } from "../lib/hold.js";
+import { bindKeyPress } from "../lib/key-press.js";
 import { placeChildren, requireChild, template } from "../lib/render.js";
 import { mirrorChildren } from "../lib/mirror-children.js";
 import { capturePointer } from "../lib/pointer-drag.js";
@@ -125,6 +126,7 @@ var SonicButton = class extends SonicFormElement {
 			this.dispatchEvent(new Event("change", { bubbles: true }));
 		}, { signal });
 		this.#bindMomentary(button, signal);
+		bindKeyPress(button, signal);
 	}
 	focusTarget() {
 		return this.#button;

package/dist/default/elements/position-group.js

@@ -0,0 +1,163 @@
+import { writeAttribute } from "../lib/write-attribute.js";
+import { bindHold } from "../lib/hold.js";
+import { SonicRadioGroupElement, optionValue } from "./radio-group.js";
+
+//#region src/elements/position-group.ts
+var SonicPositionGroupElement = class extends SonicRadioGroupElement {
+	static observedAttributes = [
+		...SonicRadioGroupElement.observedAttributes,
+		"checked",
+		"orientation"
+	];
+	get checked() {
+		return this.#isDirty ? this.#checked : this.defaultChecked;
+	}
+	set checked(isChecked) {
+		this.#isDirty = true;
+		this.#checked = isChecked === true;
+		this.render();
+	}
+	get defaultChecked() {
+		return this.hasAttribute("checked");
+	}
+	set defaultChecked(isChecked) {
+		this.reflect("checked", isChecked);
+	}
+	get orientation() {
+		const orientation = this.getAttribute("orientation");
+		return orientation === "horizontal" || orientation === "vertical" ? orientation : this.defaultOrientation;
+	}
+	set orientation(direction) {
+		this.reflect("orientation", direction);
+	}
+	get value() {
+		const value = super.value;
+		return value === "" && this.isBare() ? "on" : value;
+	}
+	set value(next) {
+		super.value = next;
+	}
+	#checked = false;
+	#holding;
+	#isDirty = false;
+	attributeChangedCallback(name) {
+		if (name === "checked") this.#isDirty = false;
+		if (this.isDisabled()) this.#holding?.release();
+		super.attributeChangedCallback(name);
+	}
+	formResetCallback() {
+		this.#isDirty = false;
+		super.formResetCallback();
+	}
+	activate() {
+		if (this.isBare()) this.bare.click();
+		else super.activate();
+	}
+	along(event) {
+		return this.orientation === "vertical" ? event.clientY : event.clientX;
+	}
+	checkedIndex(options) {
+		return options.findIndex((option) => optionValue(option) === this.value);
+	}
+	chooseByClick(option) {
+		super.chooseByClick(option);
+		if (this.isMomentary(option)) this.springBack();
+	}
+	chooseByKey(option, event) {
+		if (!this.isMomentary(option)) {
+			super.chooseByKey(option, event);
+			return;
+		}
+		if (event.repeat) return;
+		this.hold(option, event.key);
+		option.focus();
+	}
+	connect(signal) {
+		this.upgradeProperties("defaultChecked", "checked", "orientation");
+		super.connect(signal);
+		this.#holding = bindHold(this.group, {
+			canHold: () => !this.isDisabled(),
+			leave: "focusout",
+			onHold: () => {
+				this.toggleState("held", true);
+			},
+			onRelease: () => {
+				this.toggleState("held", false);
+				this.springBack();
+			}
+		}, signal);
+	}
+	focusTarget() {
+		return this.isBare() ? this.bare : super.focusTarget();
+	}
+	hold(option, by) {
+		if (this.#holding?.hold(by) === true) this.select(option);
+	}
+	isBare() {
+		return this.options().length === 0;
+	}
+	isMomentary(option) {
+		const options = this.options();
+		return (option === options[0] || option === options.at(-1)) && options.length > 1 && option.querySelector("[data-sonic-value]")?.hasAttribute("data-sonic-momentary") === true;
+	}
+	isWrapping() {
+		return false;
+	}
+	pressTarget(option) {
+		const options = this.options();
+		const index = this.checkedIndex(options);
+		return (options.length === 2 && index >= 0 ? options[1 - index] : void 0) ?? option;
+	}
+	releaseHold() {
+		this.#holding?.release();
+	}
+	render() {
+		if (!this.isBound()) return;
+		const group = this.group;
+		const count = this.options().length;
+		if (count === 0) {
+			this.#renderBare();
+			return;
+		}
+		this.bare.remove();
+		writeAttribute(group, "role", "radiogroup");
+		writeAttribute(group, "data-sonic-position-count", String(count));
+		super.render();
+	}
+	restoreState(state) {
+		if (this.isBare()) this.checked = state === "true";
+		else super.restoreState(state);
+	}
+	setChecked(isChecked) {
+		if (isChecked === this.checked) return;
+		this.checked = isChecked;
+		this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	springBack() {
+		const options = this.options();
+		const index = this.checkedIndex(options);
+		const held = options[index];
+		if (!held || !this.isMomentary(held)) return;
+		const rest = options[index === 0 ? 1 : index - 1];
+		if (!rest) return;
+		const isFocused = this.group.contains(this.ownerDocument.activeElement);
+		this.select(rest);
+		if (isFocused) rest.focus();
+	}
+	#renderBare() {
+		const group = this.group;
+		const bare = this.bare;
+		const isChecked = this.checked;
+		writeAttribute(group, "role", void 0);
+		writeAttribute(group, "data-sonic-position-count", void 0);
+		if (bare.parentElement !== group) group.append(bare);
+		writeAttribute(bare, "disabled", this.isDisabled() ? "" : void 0);
+		writeAttribute(bare, "aria-checked", String(isChecked));
+		this.forwardNaming(group, false);
+		this.forwardNaming(bare, true);
+		this.writeFormValue(isChecked ? this.value : null, String(isChecked));
+	}
+};
+
+//#endregion
+export { SonicPositionGroupElement };

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

@@ -1,6 +1,8 @@
+import { clamp } from "../lib/math.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
 import { copyNode } from "../lib/copy-node.js";
+import { bindKeyPress } from "../lib/key-press.js";
 import { placeChildren } from "../lib/render.js";
 import { mirrorChildren } from "../lib/mirror-children.js";
 import { bindDrag } from "../lib/pointer-drag.js";
@@ -52,9 +54,9 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		mirrorChildren(this, {
 			control: group,
 			copy: copyNode,
-			isCopied: (child) => child instanceof Element && child.matches("[data-sonic-value]"),
+			isCopied: (child) => this.isMirrored(child),
 			place: (copies) => {
-				this.#copyOptions(copies);
+				this.placeCopies(copies);
 			}
 		}, signal);
 		group.addEventListener("click", (event) => {
@@ -63,6 +65,7 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 			if (option) this.chooseByClick(option);
 		}, { signal });
 		this.#bindPress(group, signal);
+		bindKeyPress(group, signal);
 		group.addEventListener("keydown", (event) => {
 			if (event.defaultPrevented) return;
 			const option = this.optionOf(event.target);
@@ -75,6 +78,12 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 	focusTarget() {
 		return this.options().find((option) => option.tabIndex === 0);
 	}
+	isMirrored(child) {
+		return child instanceof Element && child.matches("[data-sonic-value]");
+	}
+	isOptionDisabled(option) {
+		return option.querySelector("[data-sonic-value]")?.hasAttribute("data-sonic-disabled") === true;
+	}
 	isWrapping() {
 		return true;
 	}
@@ -86,6 +95,9 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 	options() {
 		return [...this.group.children].filter((child) => child instanceof HTMLButtonElement && child.getAttribute("role") === "radio");
 	}
+	placeCopies(copies) {
+		this.#copyOptions(copies);
+	}
 	releaseTarget(option) {
 		return option;
 	}
@@ -93,10 +105,10 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		if (!this.isBound()) return;
 		const options = this.options();
 		const checked = options.find((option) => optionValue(option) === this.#value);
-		const focusable = checked ?? options[0];
-		const isDisabled = this.isDisabled();
+		const enabled = this.isDisabled() ? [] : options.filter((option) => !this.isOptionDisabled(option));
+		const focusable = enabled.find((option) => option === checked) ?? enabled[0];
 		for (const option of options) {
-			writeAttribute(option, "disabled", isDisabled ? "" : void 0);
+			writeAttribute(option, "disabled", enabled.includes(option) ? void 0 : "");
 			writeAttribute(option, "aria-checked", String(option === checked));
 			writeAttribute(option, "tabindex", option === focusable ? "0" : "-1");
 		}
@@ -112,11 +124,22 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		this.value = next;
 		this.dispatchEvent(new Event("change", { bubbles: true }));
 	}
+	stepFrom(from, step) {
+		const options = this.options();
+		let index = from;
+		for (const _ of options) {
+			const next = index + step;
+			index = this.isWrapping() ? (next + options.length) % options.length : clamp(next, 0, options.length - 1);
+			const option = options[index];
+			if (option && !this.isOptionDisabled(option)) return option;
+		}
+	}
 	#bindPress(group, signal) {
 		bindDrag(group, {
 			grab: (event) => {
 				const option = this.optionOf(event.target);
-				if (!option || this.isDisabled() || this.claimPress(option, event)) return;
+				if (!option || this.isDisabled() || this.isOptionDisabled(option)) return;
+				if (this.claimPress(option, event)) return;
 				const boxes = this.#optionBoxes();
 				this.#markPressed(option);
 				return {
@@ -159,19 +182,18 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 	}
 	#keyTarget(option, key) {
 		const options = this.options();
-		if (key === "Home") return options[0];
-		if (key === "End") return options.at(-1);
+		const isEnabled = (other) => !this.isOptionDisabled(other);
+		if (key === "Home") return options.find((other) => isEnabled(other));
+		if (key === "End") return options.findLast((other) => isEnabled(other));
 		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)];
+		return this.stepFrom(options.indexOf(option), step) ?? option;
 	}
 	#markPressed(pressed) {
 		for (const option of this.options()) option.toggleAttribute("data-sonic-pressed", option === pressed);
 	}
 	#optionBoxes() {
-		return this.options().map((option) => [option, option.getBoundingClientRect()]);
+		return this.options().filter((option) => !this.isOptionDisabled(option)).map((option) => [option, option.getBoundingClientRect()]);
 	}
 	#refocus(focused, value) {
 		const options = this.options();

package/dist/default/elements/switch.js

@@ -1,9 +1,7 @@
-import { clamp } from "../lib/math.js";
-import { writeAttribute } from "../lib/write-attribute.js";
-import { bindHold } from "../lib/hold.js";
 import { requireChild, template } from "../lib/render.js";
 import { bindDrag } from "../lib/pointer-drag.js";
-import { SonicRadioGroupElement, isUnder, optionValue } from "./radio-group.js";
+import { isUnder, optionValue } from "./radio-group.js";
+import { SonicPositionGroupElement } from "./position-group.js";
 
 //#region src/elements/switch.ts
 const renderSwitch = template(`
@@ -19,165 +17,59 @@ const renderPosition = template(`
 	`, HTMLButtonElement);
 const renderBare = template(`<button class="sonic-switch-position" role="switch" type="button"></button>`, HTMLButtonElement);
 const pressCenterZone = .08;
-function pressedIndex(index, count, offset) {
-	if (count === 2) return index === 0 ? 1 : 0;
-	const side = Math.abs(offset) < pressCenterZone ? 1 : Math.sign(offset);
-	const next = index + side;
-	return next < 0 || next >= count ? index - side : next;
-}
-var SonicSwitch = class extends SonicRadioGroupElement {
-	static observedAttributes = [
-		...SonicRadioGroupElement.observedAttributes,
-		"checked",
-		"orientation"
-	];
-	get checked() {
-		return this.#isDirty ? this.#checked : this.defaultChecked;
-	}
-	set checked(isChecked) {
-		this.#isDirty = true;
-		this.#checked = isChecked === true;
-		this.render();
-	}
-	get defaultChecked() {
-		return this.hasAttribute("checked");
-	}
-	set defaultChecked(isChecked) {
-		this.reflect("checked", isChecked);
-	}
-	get orientation() {
-		return this.getAttribute("orientation") === "horizontal" ? "horizontal" : "vertical";
-	}
-	set orientation(direction) {
-		this.reflect("orientation", direction);
-	}
-	get value() {
-		const value = super.value;
-		return value === "" && this.#isBare() ? "on" : value;
-	}
-	set value(next) {
-		super.value = next;
-	}
+var SonicSwitch = class extends SonicPositionGroupElement {
+	bare = renderBare();
+	defaultOrientation = "vertical";
 	group = renderSwitch();
-	#bare = renderBare();
 	#bat = requireChild(this.group, ".sonic-switch-bat", HTMLSpanElement);
-	#checked = false;
-	#holding;
 	#isClickSwallowed = false;
-	#isDirty = false;
-	attributeChangedCallback(name) {
-		if (name === "checked") this.#isDirty = false;
-		if (this.isDisabled()) this.#holding?.release();
-		super.attributeChangedCallback(name);
-	}
-	formResetCallback() {
-		this.#isDirty = false;
-		super.formResetCallback();
-	}
-	activate() {
-		if (this.#isBare()) this.#bare.click();
-		else super.activate();
-	}
-	chooseByClick(option) {
-		super.chooseByClick(option);
-		if (this.#isMomentary(option)) this.#springBack();
-	}
-	chooseByKey(option, event) {
-		if (!this.#isMomentary(option)) {
-			super.chooseByKey(option, event);
-			return;
-		}
-		if (event.repeat) return;
-		this.#hold(option, event.key);
-		option.focus();
-	}
 	claimPress(option, event) {
 		if (this.#isOnBat(event)) return true;
-		if (!this.#isMomentary(option)) return false;
+		const target = this.pressTarget(option);
+		if (this.isOptionDisabled(target) || !this.isMomentary(target)) return false;
 		this.group.setPointerCapture(event.pointerId);
-		this.#hold(option, event.pointerId);
+		this.hold(target, event.pointerId);
 		return true;
 	}
 	connect(signal) {
 		const group = this.group;
-		this.upgradeProperties("defaultChecked", "checked", "orientation");
 		super.connect(signal);
 		this.checkStyles(group, "switch.css");
-		this.#bare.addEventListener("click", (event) => {
+		this.bare.addEventListener("click", (event) => {
 			const isSwallowed = this.#isClickSwallowed && event instanceof PointerEvent && event.pointerType !== "";
 			this.#isClickSwallowed = false;
-			if (!isSwallowed) this.#setChecked(!this.checked);
+			if (!isSwallowed) this.setChecked(!this.checked);
 		}, { signal });
-		this.#bare.addEventListener("pointerdown", () => {
+		this.bare.addEventListener("pointerdown", () => {
 			this.#isClickSwallowed = false;
 		}, { signal });
 		this.#bindBat(group, signal);
-		this.#holding = bindHold(group, {
-			canHold: () => !this.isDisabled(),
-			leave: "focusout",
-			onHold: () => {
-				this.toggleState("held", true);
-			},
-			onRelease: () => {
-				this.toggleState("held", false);
-				this.#springBack();
-			}
-		}, signal);
-	}
-	focusTarget() {
-		return this.#isBare() ? this.#bare : super.focusTarget();
-	}
-	isWrapping() {
-		return false;
 	}
 	releaseTarget(option) {
-		if (this.#isMomentary(option)) return void 0;
-		const options = this.options();
-		if (options.length === 2 && optionValue(option) === this.value) return options.find((other) => other !== option);
-		return option;
+		const target = this.pressTarget(option);
+		return this.isMomentary(target) || this.isOptionDisabled(target) ? void 0 : target;
 	}
 	render() {
 		if (!this.isBound()) return;
-		const group = this.group;
+		super.render();
 		const options = this.options();
 		if (options.length > 0) {
-			this.#bare.remove();
-			writeAttribute(group, "role", "radiogroup");
-			writeAttribute(group, "data-sonic-position-count", String(options.length));
-			super.render();
-			this.#renderThrow(this.#checkedIndex(options));
+			this.#renderThrow(this.checkedIndex(options));
 			return;
 		}
-		const bare = this.#bare;
-		const isChecked = this.checked;
-		writeAttribute(group, "role", void 0);
-		delete group.dataset.sonicPositionCount;
-		if (bare.parentElement !== group) group.append(bare);
-		writeAttribute(bare, "disabled", this.isDisabled() ? "" : void 0);
-		writeAttribute(bare, "aria-checked", String(isChecked));
-		this.forwardNaming(group, false);
-		this.forwardNaming(bare, true);
 		const onSide = this.orientation === "horizontal" ? 1 : -1;
-		group.style.setProperty("--_sonic-switch-at", String(isChecked ? onSide : -onSide));
-		this.writeFormValue(isChecked ? this.value : null, String(isChecked));
+		this.group.style.setProperty("--_sonic-switch-at", String(this.checked ? onSide : -onSide));
 	}
 	renderOption() {
 		return renderPosition();
 	}
-	restoreState(state) {
-		if (this.#isBare()) this.checked = state === "true";
-		else super.restoreState(state);
-	}
-	#along(event) {
-		return this.orientation === "horizontal" ? event.clientX : event.clientY;
-	}
 	#bindBat(group, signal) {
 		bindDrag(group, {
 			grab: (event) => {
-				if (!(event.target === this.#bare || this.optionOf(event.target) !== void 0) || this.isDisabled() || !this.#isOnBat(event)) return;
+				if (!(event.target === this.bare || this.optionOf(event.target) !== void 0) || this.isDisabled() || !this.#isOnBat(event)) return;
 				return {
 					hasMoved: false,
-					last: this.#along(event),
+					last: this.along(event),
 					width: this.#bat.getBoundingClientRect().width
 				};
 			},
@@ -187,83 +79,57 @@ var SonicSwitch = class extends SonicRadioGroupElement {
 			},
 			move: (press, event) => {
 				if (this.isDisabled()) return;
-				const delta = this.#along(event) - press.last;
+				const delta = this.along(event) - press.last;
 				if (Math.abs(delta) < press.width / 4) return;
 				press.hasMoved = true;
-				press.last = this.#along(event);
+				press.last = this.along(event);
 				this.#throwBy(Math.sign(delta), event.pointerId);
 			}
 		}, signal);
 	}
-	#checkedIndex(options) {
-		return options.findIndex((option) => optionValue(option) === this.value);
-	}
 	#hasSprungFrom(option) {
-		if (!option || !this.#isMomentary(option)) return false;
-		this.#holding?.release();
+		if (!option || !this.isMomentary(option)) return false;
+		this.releaseHold();
 		return this.value !== optionValue(option);
 	}
-	#hold(option, by) {
-		if (this.#holding?.hold(by) === true) this.select(option);
-	}
-	#isBare() {
-		return this.options().length === 0;
-	}
-	#isMomentary(option) {
-		const options = this.options();
-		return (option === options[0] || option === options.at(-1)) && options.length > 1 && option.querySelector("[data-sonic-value]")?.hasAttribute("data-sonic-momentary") === true;
-	}
 	#isOnBat(event) {
 		return isUnder(this.#bat, event.clientX, event.clientY);
 	}
 	#pressBat(event) {
 		const options = this.options();
 		if (options.length === 0) {
-			this.#setChecked(!this.checked);
+			this.setChecked(!this.checked);
 			return;
 		}
 		const box = this.#bat.getBoundingClientRect();
 		const [start, size] = this.orientation === "horizontal" ? [box.left, box.width] : [box.top, box.height];
-		const offset = (this.#along(event) - start) / size - .5;
-		const option = options[pressedIndex(this.#checkedIndex(options), options.length, offset)];
+		const offset = (this.along(event) - start) / size - .5;
+		const index = this.checkedIndex(options);
+		const side = Math.abs(offset) < pressCenterZone ? 1 : Math.sign(offset);
+		const toward = this.stepFrom(index, side);
+		const option = toward && toward !== options[index] ? toward : this.stepFrom(index, -side);
 		if (!option) return;
 		this.chooseByClick(option);
 		this.#refocus(options);
 	}
 	#refocus(options) {
-		if (this.group.matches(":focus-within")) options[this.#checkedIndex(options)]?.focus();
+		if (this.group.matches(":focus-within")) options[this.checkedIndex(options)]?.focus();
 	}
 	#renderThrow(index) {
 		const count = this.options().length;
 		const at = index < 0 || count < 2 ? 0 : 2 * index / (count - 1) - 1;
 		this.group.style.setProperty("--_sonic-switch-at", String(at));
 	}
-	#setChecked(isChecked) {
-		if (isChecked === this.checked) return;
-		this.checked = isChecked;
-		this.dispatchEvent(new Event("change", { bubbles: true }));
-	}
-	#springBack() {
-		const options = this.options();
-		const index = this.#checkedIndex(options);
-		const held = options[index];
-		if (!held || !this.#isMomentary(held)) return;
-		const rest = options[index === 0 ? 1 : index - 1];
-		if (!rest) return;
-		const isFocused = this.group.contains(this.ownerDocument.activeElement);
-		this.select(rest);
-		if (isFocused) rest.focus();
-	}
 	#throwBy(direction, pointerId) {
 		const options = this.options();
 		if (options.length === 0) {
-			this.#setChecked(direction === (this.orientation === "horizontal" ? 1 : -1));
+			this.setChecked(direction === (this.orientation === "horizontal" ? 1 : -1));
 			return;
 		}
-		const index = this.#checkedIndex(options);
-		const option = options[clamp(index + direction, 0, options.length - 1)];
+		const index = this.checkedIndex(options);
+		const option = this.stepFrom(index, direction);
 		if (!option || option === options[index] || this.#hasSprungFrom(options[index])) return;
-		if (this.#isMomentary(option)) this.#hold(option, pointerId);
+		if (this.isMomentary(option)) this.hold(option, pointerId);
 		else this.select(option);
 		this.#refocus(options);
 	}