@xsynaptic/sonic-ui 0.25.1 → 0.27.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @xsynaptic/sonic-ui
 
+## 0.27.0
+
+### Minor Changes
+
+- - Envelope: a handle drag reports its reveal as the other controls with a readout do, with `data-sonic-revealed` on `.sonic-envelope`, a bubbling `sonic-reveal` event and a read-only `revealed` property.
+  - The `FieldAxis` and `SplitMode` types are exported.
+
+## 0.26.0
+
+### Minor Changes
+
+- - Breaking: a state is an attribute on the control's drawn part, `data-sonic-<state>`, and no longer a custom state on the host. `sonic-slider:state(dragging) > .sonic-slider` becomes `.sonic-slider[data-sonic-dragging]`; a region's is on its `.sonic-region`. Every look that follows a state now draws at the browser floor, a meter's ladder included.
+  - Breaking: the mark on a button, an option or a toggle position held down by a key or a pointer is `data-sonic-active`, renamed from `data-sonic-pressed`, which on `.sonic-button` is now the `pressed` state.
+  - Wave controls and the spectrum: a canvas that parses no `color-mix()` is handed a colour it does take, so in an older Chrome the wave strip's unplayed bars no longer paint black and the waveform's edge shade no longer throws.
+  - Region: `tabindex="-1"` on `<sonic-region>` takes its part out of the tab order, as on a value control.
+
+### Patch Changes
+
+- - Value controls: the spoken formatter runs only when the spoken value or the formatter changes, and a wave strip with no `<sonic-region>` no longer calls it twice per write. A changed `lang` is heard at the next spoken value.
+  - Older browsers: a closed readout stays out of the layout without the popover API, snapped edges fall back to a hairline without `round()`, and three rules no longer drop where `:state()` is missing.
+
 ## 0.25.1
 
 ### Patch Changes

package/README.md

@@ -51,7 +51,7 @@ import '@xsynaptic/sonic-ui/define';
 - `formatValue` and `parseValue` are properties holding functions. Once `parseValue` is set it has to read what `formatValue` writes, or typed entry opens on text it cannot take.
 - To show a control without taking input, set `inert` on the host. It leaves the tab order and the accessibility tree and ignores presses, and it keeps its colours and keeps drawing; `disabled` dims it and is announced as disabled.
 - A display takes its signal as data, and nothing in the library fetches, decodes or opens an `AudioContext`.
-- States a control sets itself are custom states on the host, selected with `:state()`.
+- A state a control sets itself is an attribute on its drawn part, `data-sonic-<state>`, selected as `.sonic-slider[data-sonic-dragging]`.
 - The LED, the panel, the ring and the screen have no behaviour, so they are classes on your own elements (`sonic-led`, `sonic-panel`, `sonic-ring`, `sonic-screen`). A control draws no glass of its own: wrap one in a screen for the encased look.
 
 ## Skinning

package/dist/default/elements/{display-element.js → analyser-element.js}

@@ -1,8 +1,8 @@
 import { SonicElement } from "./sonic-element.js";
-import { bindSurface } from "../lib/canvas-surface.js";
+import { bindControlSurface } from "../lib/canvas-surface.js";
 
-//#region src/elements/display-element.ts
-var SonicDisplayElement = class extends SonicElement {
+//#region src/elements/analyser-element.ts
+var SonicAnalyserElement = class extends SonicElement {
 	static observedAttributes = [
 		...SonicElement.observedAttributes,
 		"fill",
@@ -55,21 +55,19 @@ var SonicDisplayElement = class extends SonicElement {
 	}
 	connect(signal) {
 		const control = this.control;
-		this.keepControl(control, signal);
-		this.#surface = bindSurface({
+		this.keepControl(signal);
+		this.#surface = bindControlSurface({
 			canvas: this.canvas,
 			colours: this.colours,
-			fill: {
-				control,
-				sizeProperty: this.sizeProperty
-			},
+			control,
+			fill: this.fill,
 			numbers: this.numbers,
 			paint: (context, frame) => {
 				this.#paint(context, frame);
 			},
-			signal
+			signal,
+			sizeProperty: this.sizeProperty
 		});
-		this.#surface.setFill(this.fill);
 	}
 	surface() {
 		return this.#surface;
@@ -87,4 +85,4 @@ var SonicDisplayElement = class extends SonicElement {
 };
 
 //#endregion
-export { SonicDisplayElement };
+export { SonicAnalyserElement };

package/dist/default/elements/button.js

@@ -88,7 +88,13 @@ var SonicButton = class extends SonicFormElement {
 	set value(value) {
 		this.reflect("value", value);
 	}
-	#button = renderButton();
+	boxProbe = {
+		property: "padding-inline-start",
+		ratio: "--_sonic-button-padding-ratio",
+		selector: ".sonic-button-cap > :not(svg, .sonic-led)"
+	};
+	control = renderButton();
+	sheet = "button.css";
 	#holding;
 	#isDirty = false;
 	#pressed = false;
@@ -101,10 +107,10 @@ var SonicButton = class extends SonicFormElement {
 		this.attributeChangedCallback("pressed");
 	}
 	activate() {
-		this.#button.click();
+		this.control.click();
 	}
 	connect(signal) {
-		const button = this.#button;
+		const button = this.control;
 		const cap = requireChild(button, ".sonic-button-cap", HTMLSpanElement);
 		this.upgradeProperties("armed", "busy", "defaultPressed", "legend", "momentary", "softDisabled", "latching", "pressed", "value");
 		mirrorChildren(this, {
@@ -130,11 +136,11 @@ var SonicButton = class extends SonicFormElement {
 		bindKeyPress(button, signal);
 	}
 	focusTarget() {
-		return this.#button;
+		return this.control;
 	}
 	render() {
 		if (!this.isBound()) return;
-		const button = this.#button;
+		const button = this.control;
 		writeAttribute(button, "disabled", this.isDisabled() ? "" : void 0);
 		writeAttribute(button, "aria-disabled", this.#isSoftDisabled() ? "true" : void 0);
 		writeAttribute(button, "aria-busy", this.busy ? "true" : void 0);
@@ -187,7 +193,7 @@ var SonicButton = class extends SonicFormElement {
 	}
 	#showLegend() {
 		const legend = this.legend;
-		for (const part of this.#button.querySelectorAll(":scope > .sonic-button-cap > [data-sonic-when]")) {
+		for (const part of this.control.querySelectorAll(":scope > .sonic-button-cap > [data-sonic-when]")) {
 			const when = part.dataset.sonicWhen ?? "";
 			part.toggleAttribute("data-sonic-hidden", !pressWhens.has(when) && when !== legend);
 		}

package/dist/default/elements/dial.js

@@ -51,8 +51,13 @@ var SonicDial = class extends SonicValueElement {
 	set modulationValue(value) {
 		this.#modulation.write(value, this.isBound() ? this.mapping() : void 0);
 	}
-	#dial = renderDial();
-	#modulation = createModulation(this.#dial, "dial", (isModulated) => {
+	boxProbe = {
+		property: "margin-bottom",
+		selector: "[popover]"
+	};
+	control = renderDial();
+	sheet = "dial.css";
+	#modulation = createModulation(this.control, "dial", (isModulated) => {
 		this.toggleState("modulated", isModulated);
 	});
 	connectedCallback() {
@@ -60,16 +65,13 @@ var SonicDial = class extends SonicValueElement {
 		super.connectedCallback();
 	}
 	connect(signal) {
-		const dial = this.#dial;
+		const dial = this.control;
 		bindScale(this, {
 			control: dial,
 			marks: requireChild(dial, ".sonic-dial-scale", HTMLDivElement)
 		}, signal);
 		this.render();
-		this.bindGestures(dial, signal, () => ({
-			position: (event) => -event.clientY,
-			travelPx: this.travelPx(dial, "--_sonic-dial-travel")
-		}));
+		this.bindGestures(signal, () => this.upwardAxis("--_sonic-dial-travel"));
 	}
 	draw() {
 		this.#modulation.draw({
@@ -79,9 +81,6 @@ var SonicDial = class extends SonicValueElement {
 			value: this.value
 		});
 	}
-	focusTarget() {
-		return this.#dial;
-	}
 	isWrapping() {
 		return this.endless;
 	}

package/dist/default/elements/envelope.js

@@ -2,7 +2,6 @@ import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicElement } from "./sonic-element.js";
 import { requireChild, template } from "../lib/render.js";
 import { Readout } from "./readout.js";
-import { ReadoutClaim } from "./readout-claim.js";
 import { SonicValueElement, linkValue } from "./value-element.js";
 import { bindFieldGesture } from "./field-gesture.js";
 import { adsrPath, adsrShape, adsrStages, timeStages } from "../lib/adsr-shape.js";
@@ -116,28 +115,33 @@ var SonicEnvelope = class extends SonicElement {
 	set releaseCurve(id) {
 		this.reflect("release-curve", id);
 	}
+	get revealed() {
+		return this.hasState("revealed");
+	}
 	get sustain() {
 		return this.getAttribute("sustain") ?? "";
 	}
 	set sustain(id) {
 		this.reflect("sustain", id);
 	}
+	boxProbe = {
+		property: "margin-bottom",
+		selector: "[popover]"
+	};
+	control = renderEnvelope();
+	sheet = "envelope.css";
 	#bindings = /* @__PURE__ */ new Map();
-	#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);
+	#curveHandles = stageParts(this.control, "sonic-envelope-curve", curveStages);
+	#fill = requireChild(this.control, ".sonic-envelope-fill", SVGElement);
+	#floor = requireChild(this.control, ".sonic-envelope-floor", SVGElement);
 	#gesture;
-	#graph = requireChild(this.#envelope, ".sonic-envelope-graph", SVGElement);
-	#handles = stageParts(this.#envelope, "sonic-envelope-handle", timeStages);
+	#graph = requireChild(this.control, ".sonic-envelope-graph", SVGElement);
+	#handles = stageParts(this.control, "sonic-envelope-handle", timeStages);
 	#held;
 	#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);
+	#line = requireChild(this.control, ".sonic-envelope-line", SVGElement);
+	#readout = new Readout(requireChild(this.control, ".sonic-envelope-readout", HTMLDivElement));
+	#reticle = requireChild(this.control, ".sonic-envelope-reticle", HTMLDivElement);
 	#shape = adsrShape({});
 	#waiting = /* @__PURE__ */ new Set();
 	#warned = /* @__PURE__ */ new Set();
@@ -156,10 +160,9 @@ var SonicEnvelope = class extends SonicElement {
 		super.connectedCallback();
 	}
 	connect(signal) {
-		const envelope = this.#envelope;
-		this.keepControl(envelope, signal);
+		this.keepControl(signal);
 		this.#bind();
-		this.#bindPointer(envelope, signal);
+		this.#bindPointer(this.control, signal);
 		signal.addEventListener("abort", () => {
 			this.#unbind();
 		}, { once: true });
@@ -184,7 +187,7 @@ var SonicEnvelope = class extends SonicElement {
 	}
 	#bindPointer(envelope, signal) {
 		this.#gesture = bindFieldGesture(envelope, {
-			claim: this.#claim,
+			element: this,
 			grab: (event) => this.#grab(event),
 			input: ({ drives }, next) => {
 				this.#isDriving = true;
@@ -201,8 +204,11 @@ var SonicEnvelope = class extends SonicElement {
 					binding.link.change();
 				}
 			},
-			toggle: (isDragging) => {
-				this.toggleState("dragging", isDragging);
+			renderReadout: () => {
+				this.#renderReadout();
+			},
+			toggle: (state, isOn) => {
+				this.toggleState(state, isOn);
 			}
 		}, signal);
 	}
@@ -316,7 +322,7 @@ var SonicEnvelope = class extends SonicElement {
 		}
 		this.#readout.show({
 			anchor: drag.part,
-			isOpen: this.#claim.isRevealed && this.readout,
+			isOpen: this.#gesture?.isRevealed() === true && this.readout,
 			text: drag.drives.map(({ binding }) => binding.element.valueText).join(", ")
 		});
 	}

package/dist/default/elements/field-gesture.js

@@ -1,6 +1,8 @@
 import { bindDrag } from "../lib/pointer-drag.js";
-import { revealDelay } from "./readout-claim.js";
+import { ReadoutClaim, revealDelay } from "./readout-claim.js";
+import { createDoublePress } from "../lib/double-press.js";
 import { dragThresholdPx } from "../lib/drag-step.js";
+import { isMenuPress, isResetPress } from "../lib/modifier-press.js";
 import { pointerMove, pointerPosition, startFieldDrag, stepFieldDrag } from "../lib/field.js";
 
 //#region src/elements/field-gesture.ts
@@ -23,16 +25,39 @@ function startAxis(hold) {
 		travelPx
 	};
 }
+function createReveal({ element, renderReadout, toggle }) {
+	let isRevealed = false;
+	const show = () => {
+		if (claim.isRevealed !== isRevealed) {
+			isRevealed = claim.isRevealed;
+			toggle("revealed", isRevealed);
+			element.dispatchEvent(new Event("sonic-reveal", { bubbles: true }));
+		}
+		renderReadout();
+	};
+	const claim = new ReadoutClaim(show);
+	return {
+		claim,
+		show
+	};
+}
 function bindFieldGesture(target, options, signal) {
-	const { claim } = options;
+	const { reset, resetsOnDoublePress } = options;
+	const { claim, show } = createReveal(options);
+	const doublePress = reset && resetsOnDoublePress ? createDoublePress() : void 0;
 	let pointerType;
+	const grab = (event) => {
+		if (isMenuPress(event)) return void 0;
+		if (!reset || !isResetPress(event)) return options.grab(event);
+		reset();
+	};
 	const drag = bindDrag(target, {
 		cancel: ({ from, hold }) => {
 			options.input(hold, from);
 		},
 		grab: (event) => {
 			pointerType = event.pointerType;
-			const hold = options.grab(event);
+			const hold = grab(event);
 			if (!hold) {
 				pointerType = void 0;
 				return;
@@ -53,8 +78,8 @@ function bindFieldGesture(target, options, signal) {
 				})
 			};
 		},
-		lift: ({ hold }, event) => {
-			options.lift?.(hold, event);
+		lift: (_held, event) => {
+			if (doublePress?.press(event) === true && resetsOnDoublePress?.() === true) reset?.();
 		},
 		move: (held, event) => {
 			const { axes } = held.hold;
@@ -63,7 +88,10 @@ function bindFieldGesture(target, options, signal) {
 				y: axes.y?.model.mapping()
 			}, held.state, flip(pointerMove(event), held.hold));
 			held.state = step.state;
-			if (step.state.isEngaged) claim.reveal("drag");
+			if (step.state.isEngaged) {
+				claim.reveal("drag");
+				show();
+			}
 			options.input(held.hold, step);
 		},
 		release: ({ from, hold }) => {
@@ -71,12 +99,25 @@ function bindFieldGesture(target, options, signal) {
 			options.release(hold, fieldAxes.filter((axis) => hold.axes[axis]?.model.value !== from[axis]));
 			pointerType = void 0;
 		},
-		toggle: options.toggle
+		toggle: (isDragging) => {
+			options.toggle("dragging", isDragging);
+		}
 	}, signal);
+	target.addEventListener("pointercancel", () => {
+		doublePress?.forget();
+	}, { signal });
 	return {
+		concealKeys: () => {
+			if (claim.conceal("keys")) show();
+		},
 		current: () => drag.current()?.hold,
 		end: drag.end,
-		pointerType: () => pointerType
+		isRevealed: () => claim.isRevealed,
+		pointerType: () => pointerType,
+		revealKeys: () => {
+			claim.reveal("keys");
+			show();
+		}
 	};
 }
 

package/dist/default/elements/meter.js

@@ -109,6 +109,8 @@ var SonicMeter = class extends SonicElement {
 	set value(value) {
 		this.reflect("value", value);
 	}
+	control = renderMeter();
+	sheet = "meter.css";
 	#bar = -Infinity;
 	#carryMs = 0;
 	#clipAt = -Infinity;
@@ -116,7 +118,6 @@ var SonicMeter = class extends SonicElement {
 	#isValueShown = false;
 	#lastFrame;
 	#level = 0;
-	#meter = renderMeter();
 	#peak = -Infinity;
 	#peakHold = -Infinity;
 	#peakHoldAt = -Infinity;
@@ -138,7 +139,7 @@ var SonicMeter = class extends SonicElement {
 	connect(signal) {
 		const now = performance.now();
 		this.upgradeProperties("ballistics", "max", "min", "orientation", "origin", "segments", "value", "level");
-		this.keepControl(this.#meter, signal);
+		this.keepControl(signal);
 		this.#renderSegments();
 		this.#render(now);
 		this.#schedule(now);
@@ -172,7 +173,7 @@ var SonicMeter = class extends SonicElement {
 	}
 	#render(now) {
 		if (!this.isBound()) return;
-		const meter = this.#meter;
+		const meter = this.control;
 		const origin = this.origin === void 0 ? 0 : this.#proportionOf(this.origin);
 		meter.style.setProperty("--_sonic-meter-min", String(this.min));
 		meter.style.setProperty("--_sonic-meter-max", String(this.max));
@@ -193,7 +194,7 @@ var SonicMeter = class extends SonicElement {
 	}
 	#renderSegments() {
 		if (!this.isBound()) return;
-		const meter = this.#meter;
+		const meter = this.control;
 		const segments = this.#segments;
 		this.toggleState("ladder", segments !== void 0);
 		if (!segments) {
@@ -209,7 +210,7 @@ var SonicMeter = class extends SonicElement {
 		meter.style.setProperty("--_sonic-meter-clip-segments", segmentsBelow(segments, "clip"));
 	}
 	#renderStill(bar) {
-		const { style } = this.#meter;
+		const { style } = this.control;
 		style.setProperty("--_sonic-meter-bar", String(bar));
 		style.setProperty("--_sonic-meter-peak-hold", "0");
 		style.setProperty("--_sonic-meter-clipped", "0");

package/dist/default/elements/number.js

@@ -22,20 +22,17 @@ var SonicNumber = class extends SonicValueElement {
 	set press(gesture) {
 		this.reflect("press", gesture);
 	}
-	#number = renderNumber();
-	#digits = requireChild(this.#number, ".sonic-number-value", HTMLSpanElement);
+	control = renderNumber();
+	sheet = "number.css";
+	#digits = requireChild(this.control, ".sonic-number-value", HTMLSpanElement);
 	connectedCallback() {
 		this.upgradeProperties("press");
 		super.connectedCallback();
 	}
 	connect(signal) {
-		const number = this.#number;
-		this.keepControl(number, signal);
+		this.keepControl(signal);
 		this.render();
-		this.bindGestures(number, signal, () => ({
-			position: (event) => -event.clientY,
-			travelPx: this.travelPx(number, "--_sonic-number-travel")
-		}));
+		this.bindGestures(signal, () => this.upwardAxis("--_sonic-number-travel"));
 	}
 	controlRole() {
 		return "spinbutton";
@@ -43,9 +40,6 @@ var SonicNumber = class extends SonicValueElement {
 	draw() {
 		this.#digits.textContent = this.valueText;
 	}
-	focusTarget() {
-		return this.#number;
-	}
 	tapTarget() {
 		if (this.press !== "step") return void 0;
 		const mapping = this.mapping();

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

@@ -81,7 +81,7 @@ var SonicPositionGroupElement = class extends SonicRadioGroupElement {
 	connect(signal) {
 		this.upgradeProperties("defaultChecked", "checked", "orientation");
 		super.connect(signal);
-		this.#holding = bindHold(this.group, {
+		this.#holding = bindHold(this.control, {
 			canHold: () => !this.isDisabled(),
 			leave: "focusout",
 			onHold: () => {
@@ -129,7 +129,7 @@ var SonicPositionGroupElement = class extends SonicRadioGroupElement {
 	}
 	render() {
 		if (!this.isBound()) return;
-		const group = this.group;
+		const group = this.control;
 		const count = this.options().length;
 		if (count === 0) {
 			this.#renderBare();
@@ -156,12 +156,12 @@ var SonicPositionGroupElement = class extends SonicRadioGroupElement {
 	springBack() {
 		const rest = restOf(this.positions(), this.checkedIndex());
 		if (rest === void 0) return;
-		const isFocused = this.group.contains(this.ownerDocument.activeElement);
+		const isFocused = this.control.contains(this.ownerDocument.activeElement);
 		this.select(rest);
 		if (isFocused) this.options()[rest]?.focus();
 	}
 	#renderBare() {
-		const group = this.group;
+		const group = this.control;
 		const bare = this.bare;
 		const isChecked = this.checked;
 		writeAttribute(group, "role", void 0);

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

@@ -43,7 +43,7 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		return false;
 	}
 	connect(signal) {
-		const group = this.group;
+		const group = this.control;
 		this.upgradeProperties("value");
 		mirrorChildren(this, {
 			control: group,
@@ -91,10 +91,10 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 	optionOf(target) {
 		if (!(target instanceof Element)) return void 0;
 		const option = target.closest("[role=\"radio\"]");
-		return option instanceof HTMLButtonElement && option.parentElement === this.group ? option : void 0;
+		return option instanceof HTMLButtonElement && option.parentElement === this.control ? option : void 0;
 	}
 	options() {
-		return [...this.group.children].filter((child) => child instanceof HTMLButtonElement && child.getAttribute("role") === "radio");
+		return [...this.control.children].filter((child) => child instanceof HTMLButtonElement && child.getAttribute("role") === "radio");
 	}
 	placeCopies(copies) {
 		this.#copyOptions(copies);
@@ -109,7 +109,7 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		});
 	}
 	refocusAt(index) {
-		if (this.group.matches(":focus-within")) this.options()[index]?.focus();
+		if (this.control.matches(":focus-within")) this.options()[index]?.focus();
 	}
 	releaseTarget(index) {
 		return index;
@@ -126,7 +126,7 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 			writeAttribute(option, "aria-checked", String(option === checked));
 			writeAttribute(option, "tabindex", option === focusable ? "0" : "-1");
 		}
-		this.forwardNaming(this.group, true);
+		this.forwardNaming(this.control, true);
 		this.writeFormValue(checked ? this.#value : null, this.#value);
 	}
 	restoreState(state) {
@@ -175,7 +175,7 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		}, signal);
 	}
 	#copyOptions(copies) {
-		const group = this.group;
+		const group = this.control;
 		const options = this.options();
 		const focused = this.optionOf(group.querySelector(":scope > :focus"));
 		const focusedValue = focused && optionValue(focused);
@@ -192,7 +192,7 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		if (focused) this.#refocus(focused, focusedValue);
 	}
 	#markPressed(pressed) {
-		for (const [index, option] of this.options().entries()) option.toggleAttribute("data-sonic-pressed", index === pressed);
+		for (const [index, option] of this.options().entries()) option.toggleAttribute("data-sonic-active", index === pressed);
 	}
 	#optionBoxes() {
 		const positions = this.positions();

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

@@ -51,6 +51,7 @@ var RegionLayer = class {
 		this.#release(true);
 	}
 	follow() {
+		if (this.#drawn.length === 0) return;
 		if (this.#stripKey() !== this.#key) this.render();
 	}
 	isHeld() {
@@ -158,6 +159,7 @@ var RegionLayer = class {
 		const span = link.span();
 		const [low, high] = regionTravel(span, mapping.bounds);
 		const canMove = this.#isEnabled(entry);
+		const stop = region.getAttribute("tabindex") === "-1" ? "-1" : "0";
 		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) {
@@ -170,7 +172,7 @@ var RegionLayer = class {
 		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);
+		writeAttribute(part, "tabindex", canMove ? stop : void 0);
 		link.draw(part);
 		return entry;
 	}

package/dist/default/elements/region.js

@@ -18,7 +18,8 @@ var SonicRegion = class extends SonicFormElement {
 		"end",
 		"kind",
 		"name",
-		"start"
+		"start",
+		"tabindex"
 	];
 	static {
 		link = (element) => ({
@@ -108,6 +109,9 @@ var SonicRegion = class extends SonicFormElement {
 		};
 		this.render();
 	}
+	stateTarget() {
+		return this.#part;
+	}
 	#draw(part) {
 		this.#part = part;
 		this.forwardNaming(part, true);

package/dist/default/elements/segmented.js

@@ -9,10 +9,13 @@ const renderOption = template(`
 		</button>
 	`, HTMLButtonElement);
 var SonicSegmented = class extends SonicRadioGroupElement {
-	group = renderSegmented();
-	connect(signal) {
-		super.connect(signal);
-	}
+	boxProbe = {
+		property: "padding-inline-start",
+		ratio: "--_sonic-segmented-padding-ratio",
+		selector: ".sonic-segmented-cap"
+	};
+	control = renderSegmented();
+	sheet = "segmented.css";
 	renderOption() {
 		return renderOption();
 	}

package/dist/default/elements/slider.js

@@ -86,9 +86,14 @@ var SonicSlider = class extends SonicValueElement {
 	set spring(isSpring) {
 		this.reflect("spring", isSpring);
 	}
+	boxProbe = {
+		property: "margin-bottom",
+		selector: "[popover]"
+	};
+	control = renderSlider();
+	sheet = "slider.css";
 	#buffered = [];
-	#slider = renderSlider();
-	#modulation = createModulation(this.#slider, "slider", (isModulated) => {
+	#modulation = createModulation(this.control, "slider", (isModulated) => {
 		this.toggleState("modulated", isModulated);
 	});
 	connectedCallback() {
@@ -96,7 +101,7 @@ var SonicSlider = class extends SonicValueElement {
 		super.connectedCallback();
 	}
 	connect(signal) {
-		const slider = this.#slider;
+		const slider = this.control;
 		const cap = requireChild(slider, ".sonic-slider-cap", HTMLDivElement);
 		bindScale(this, {
 			control: slider,
@@ -118,7 +123,7 @@ var SonicSlider = class extends SonicValueElement {
 			}
 		});
 		this.render();
-		this.bindGestures(slider, signal, (event) => {
+		this.bindGestures(signal, (event) => {
 			const axis = this.#axis(slider, cap);
 			if (event.target instanceof Node && cap.contains(event.target)) return axis;
 			if (this.groovePress === "none") return;
@@ -136,12 +141,9 @@ var SonicSlider = class extends SonicValueElement {
 			origin: this.originValue(),
 			value: this.value
 		});
-		this.#renderBuffered(this.#slider);
-		this.#renderScrub(this.#slider);
-		this.#placeReadout(this.#slider);
-	}
-	focusTarget() {
-		return this.#slider;
+		this.#renderBuffered(this.control);
+		this.#renderScrub(this.control);
+		this.#placeReadout(this.control);
 	}
 	scrubChanged() {
 		if (this.scrub) this.render();