@xsynaptic/sonic-ui 0.26.0 → 0.28.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @xsynaptic/sonic-ui
 
+## 0.28.0
+
+### Minor Changes
+
+- `--sonic-gloss` scales a cap's sheen apart from `--sonic-relief`: 0 is matte, 1 the default. A slider cap has no sheen until the token is set, so there `1` is not the same as unset.
+- - `<sonic-ticker>`: one line of content that scrolls there and back when it does not fit its box, registered by `./define/ticker` with `ticker.css`, which needs no material sheet. It stands still with an ellipsis under reduced motion, and pauses under a mouse, while a link round it has keyboard focus, off screen, and while `paused` is set. A drag along the line moves the tape; with `cancellable` a drag that strays past `--sonic-cancel-zone`, shared with the wave strip, puts it back. `text` replaces the content. A link among the children is copied and still navigates.
+  - Ticker surface: tokens `--sonic-ticker-rate` (a length a second, `40px`), `--sonic-ticker-hold` (`2s`) and `--sonic-ticker-fade` (`0.75rem`); hook classes `.sonic-ticker` and `.sonic-ticker-tape`; states `data-sonic-overflowing`, `data-sonic-dragging`, `data-sonic-cancelling` and `data-sonic-paused`, and `data-sonic-clipped` naming each end with content past it.
+
+### Patch Changes
+
+- Switch and toggle: the bat and the cap land with a small overshoot, and the switch's flip takes 120ms, up from 90ms.
+- Split: a move the siblings cannot absorb on their own steps is turned back, so the total holds across mixed step grids.
+
+## 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

package/README.md

@@ -88,6 +88,7 @@ A skin is one rule that sets tokens on a class; copy `dist/skins/flat.css` to st
 | `slider.css`    | core, cap, glass, readout, value, groove, scale |
 | `spectrum.css`  | core                                            |
 | `switch.css`    | core, cap                                       |
+| `ticker.css`    |                                                 |
 | `toggle.css`    | core, cap, well, keycap                         |
 | `waveform.css`  | core, cap, glass, readout, value                |
 | `wavestrip.css` | core, cap, glass, readout, value                |

package/dist/default/define/ticker.js

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

package/dist/default/define.js

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

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);
@@ -149,9 +155,6 @@ var SonicButton = class extends SonicFormElement {
 	restoreState(state) {
 		if (this.latching) this.pressed = state === "true";
 	}
-	stateTarget() {
-		return this.#button;
-	}
 	#bindMomentary(button, signal) {
 		const holding = bindHold(button, {
 			canHold: () => !this.isDisabled() && !this.#isSoftDisabled(),
@@ -190,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,15 +81,9 @@ var SonicDial = class extends SonicValueElement {
 			value: this.value
 		});
 	}
-	focusTarget() {
-		return this.#dial;
-	}
 	isWrapping() {
 		return this.endless;
 	}
-	stateTarget() {
-		return this.#dial;
-	}
 };
 
 //#endregion

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,17 +160,13 @@ 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 });
 	}
-	stateTarget() {
-		return this.#envelope;
-	}
 	#bind() {
 		this.#gesture?.end();
 		this.#unbind();
@@ -187,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;
@@ -204,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);
 	}
@@ -319,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);
@@ -148,9 +149,6 @@ var SonicMeter = class extends SonicElement {
 			this.#lastFrame = void 0;
 		}, { once: true });
 	}
-	stateTarget() {
-		return this.#meter;
-	}
 	#isSettled(now) {
 		if (this.#isValueShown) return true;
 		if (now - this.#clipAt < holdMs) return false;
@@ -175,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));
@@ -196,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) {
@@ -212,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,12 +40,6 @@ var SonicNumber = class extends SonicValueElement {
 	draw() {
 		this.#digits.textContent = this.valueText;
 	}
-	focusTarget() {
-		return this.#number;
-	}
-	stateTarget() {
-		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) {
@@ -139,9 +139,6 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		this.value = next;
 		this.dispatchEvent(new Event("change", { bubbles: true }));
 	}
-	stateTarget() {
-		return this.group;
-	}
 	stepFrom(from, step) {
 		return stepFrom(this.positions(), from, {
 			isWrapping: this.isWrapping(),
@@ -178,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);

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();
 	}