@xsynaptic/sonic-ui 0.10.4 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @xsynaptic/sonic-ui
 
+## 0.13.0
+
+### Minor Changes
+
+- The material is split into sheets under `material/*.css`, so you can load only what your controls need; the README lists them. `material.css` and `controls.css` work as before, and sheets now load in any order.
+
+  New public surface: the material sheets, and the sublayers `sonic.material` and `sonic.control`. A rule written directly in `@layer sonic` now always wins over the control sheets.
+
+- Waveform: `zoomable` opts in to zoom by ctrl or cmd wheel, two-finger pinch and the `+` and `-` keys, between `zoom-min` and `zoom-max` (20 and 280 by default). `sonic-zoom` fires for a gesture and never for a write to `zoom`. A second finger ends a scrub without a seek. Without `zoomable` nothing changes.
+
+## 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

@@ -27,27 +27,51 @@ A display takes its signal as data: `spectrum.analyser = node`, or `spectrum.pus
 
 Under a hydrating framework, register the definitions once hydration is done (in React, from an effect); a control owns one child of its host and uses only the children it documents.
 
-## Wave controls
+## Loading less
+
+`controls.css` loads everything. To load less, import each control's sheet and the material sheets it needs, in any order:
 
-`<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.
+```css
+@import '@xsynaptic/sonic-ui/material/core.css';
+@import '@xsynaptic/sonic-ui/material/lens.css';
+@import '@xsynaptic/sonic-ui/material/groove.css';
+@import '@xsynaptic/sonic-ui/meter.css';
+```
+
+| Sheet           | Needs from `material/`                          |
+| --------------- | ----------------------------------------------- |
+| `button.css`    | core, cap, well, keycap                         |
+| `dial.css`      | core, cap, glass, readout, value, arc, scale    |
+| `envelope.css`  | core, glass, pane, well, readout, bracket       |
+| `led.css`       | core, lens                                      |
+| `meter.css`     | core, lens, groove                              |
+| `number.css`    | core, cap, glass, pane, well, value             |
+| `panel.css`     | core                                            |
+| `ring.css`      | core, arc                                       |
+| `screen.css`    | core, glass, pane, well                         |
+| `segmented.css` | core, cap, well, keycap                         |
+| `slider.css`    | core, cap, glass, readout, value, groove, scale |
+| `spectrum.css`  | core, glass, pane, well                         |
+| `switch.css`    | core, cap                                       |
+| `toggle.css`    | core, cap, well, keycap                         |
+| `waveform.css`  | core, cap, glass, pane, well, readout, value    |
+| `wavestrip.css` | core, cap, glass, pane, well, readout, value    |
+| `xy.css`        | core, cap, glass, pane, well, readout, bracket  |
+
+An LED inside a control also needs `led.css`, and a button inside a ring needs `button.css`. The development build warns about a missing sheet.
+
+## Wave controls
 
-|  | 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` |
+`<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.
 
-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`.
+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.
 
-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 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.
 
-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`.
+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.
 
-`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.
+With `zoomable`, a ctrl or cmd wheel, a pinch and the `+` and `-` keys set the waveform's `zoom` and fire `sonic-zoom`; a write to `zoom` fires nothing.
 
-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";
@@ -113,7 +114,11 @@ var SonicButton = class extends SonicFormElement {
 			}
 		}, signal);
 		this.render();
-		this.checkStyles(button, "button.css");
+		this.checkStyles(button, "button.css", [
+			"cap",
+			"well",
+			"keycap"
+		]);
 		button.addEventListener("click", (event) => {
 			if (this.#isSoftDisabled()) {
 				event.preventDefault();
@@ -125,6 +130,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/dial.js

@@ -64,7 +64,13 @@ var SonicDial = class extends SonicValueElement {
 			marks: requireChild(dial, ".sonic-dial-scale", HTMLDivElement)
 		}, signal);
 		this.render();
-		this.checkStyles(dial, "dial.css");
+		this.checkStyles(dial, "dial.css", [
+			"cap",
+			"readout",
+			"value",
+			["glass", ".sonic-dial-readout"],
+			["arc", ".sonic-dial-ring"]
+		]);
 		this.bindGestures(dial, signal, () => ({
 			position: (event) => -event.clientY,
 			travelPx: this.travelPx(dial, "--_sonic-dial-travel")

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

@@ -66,7 +66,11 @@ var SonicDisplayElement = class extends SonicElement {
 			},
 			signal
 		});
-		this.checkStyles(control, this.sheet);
+		this.checkStyles(control, this.sheet, [
+			"glass",
+			"pane",
+			"well"
+		]);
 		this.#syncFill = bindFill(control, this.sizeProperty, signal);
 		this.#syncFill(this.fill);
 	}

package/dist/default/elements/envelope.js

@@ -170,7 +170,12 @@ var SonicEnvelope = class extends SonicElement {
 		this.#signal = signal;
 		this.keepControl(envelope, signal);
 		this.#bind();
-		this.checkStyles(envelope, "envelope.css");
+		this.checkStyles(envelope, "envelope.css", [
+			"glass",
+			"pane",
+			"well",
+			"readout"
+		]);
 		this.#bindPointer(envelope, signal);
 		signal.addEventListener("abort", () => {
 			this.#signal = void 0;

package/dist/default/elements/meter.js

@@ -138,7 +138,7 @@ var SonicMeter = class extends SonicElement {
 		this.#renderSegments();
 		this.#render(now);
 		this.#schedule(now);
-		this.checkStyles(this.#meter, "meter.css");
+		this.checkStyles(this.#meter, "meter.css", ["lens", "groove"]);
 		signal.addEventListener("abort", () => {
 			if (this.#frame !== void 0) cancelAnimationFrame(this.#frame);
 			this.#frame = void 0;

package/dist/default/elements/number.js

@@ -32,7 +32,13 @@ var SonicNumber = class extends SonicValueElement {
 		const number = this.#number;
 		this.keepControl(number, signal);
 		this.render();
-		this.checkStyles(number, "number.css");
+		this.checkStyles(number, "number.css", [
+			"cap",
+			"glass",
+			"pane",
+			"well",
+			"value"
+		]);
 		this.bindGestures(number, signal, () => ({
 			position: (event) => -event.clientY,
 			travelPx: this.travelPx(number, "--_sonic-number-travel")

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/segmented.js

@@ -12,7 +12,11 @@ var SonicSegmented = class extends SonicRadioGroupElement {
 	group = renderSegmented();
 	connect(signal) {
 		super.connect(signal);
-		this.checkStyles(this.group, "segmented.css");
+		this.checkStyles(this.group, "segmented.css", [
+			"well",
+			"keycap",
+			["cap", ".sonic-segmented-option"]
+		]);
 	}
 	renderOption() {
 		return renderOption();

package/dist/default/elements/slider.js

@@ -114,7 +114,13 @@ var SonicSlider = class extends SonicValueElement {
 			}
 		});
 		this.render();
-		this.checkStyles(slider, "slider.css");
+		this.checkStyles(slider, "slider.css", [
+			"cap",
+			"readout",
+			"value",
+			"groove",
+			["glass", ".sonic-slider-readout"]
+		]);
 		this.bindGestures(slider, signal, (event) => {
 			const axis = this.#axis(slider, cap);
 			if (event.target instanceof Node && cap.contains(event.target)) return axis;

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

@@ -58,7 +58,7 @@ var SonicElement = class extends HTMLElement {
 		}
 		if (!this.isDisabled() && !this.#focused()) target.focus(options);
 	}
-	checkStyles(control, sheet) {}
+	checkStyles(control, sheet, material = []) {}
 	focusTarget() {}
 	forwardNaming(target, isNamed) {
 		const labels = isNamed ? this.namingLabels() : [];