@xsynaptic/sonic-ui 0.20.0 → 0.22.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @xsynaptic/sonic-ui
 
+## 0.22.0
+
+### Minor Changes
+
+- - `--sonic-entry-selection` colours the selected text of a typed entry, which opens with its value selected. Unset, it stays the control's lit colour.
+  - `--sonic-slider-groove-hover-delay` is how long a slider's groove waits under a pointer before it thickens to `--sonic-slider-groove-hover-ratio`. A press or a keyboard focus thickens it at once and leaving thins it at once. Unset, there is no wait.
+  - `--sonic-readout-depth` scales a readout's cast shadow, inner shine and lighter centre from 0 to 1. Unset, it follows the relief.
+  - Behaviour change: a readout no longer takes `--sonic-glass-depth` from a screen around it. Inside a screen flattened with `--sonic-glass-depth: 0` its centre follows the relief again, as its shadow always did; set `--sonic-readout-depth: 0` to flatten it.
+
+## 0.21.0
+
+### Minor Changes
+
+- - Breaking: the number box is plain: its digits alone in the text colour, with no glass, edge or corner. Wrap it in `.sonic-screen` for the box (`--sonic-screen-size` set to the number's size and `--sonic-screen-inset-ratio: 0` gives the old one). `--sonic-number-radius-ratio` and `--sonic-number-inset-ratio` are removed, `--sonic-radius` and the glass tokens no longer reach it, and `number.css` needs only the core, cap and value material sheets.
+  - With no skin a meter no longer draws a near-black bar: its bed is clear and its unlit segments are a faint tint of the text colour, like the LED. Skins are unchanged.
+  - A screen now shrinks in a flex row; give one that holds a text readout a `min-inline-size`.
+  - A button sets `user-select: none`, as every other control does, so a text legend no longer selects under a long press on touch.
+  - A held XY puck stays solid, as a held envelope handle does; the hold shows as the glow, or as the bracket on a skin with no relief. It no longer turns hollow.
+  - `--sonic-focus-radius` rounds the focus outline and glow of the plain boxes (number box, waveform, wave strip), which have no corner of their own. Unset, they stay square.
+- - With no skin, every unlit part follows the text colour at 30%, as the LED and the meter did: a dial's ring, a slider's groove, the ring, the pad's lines, the wave strip. Glass, a disabled envelope handle and a disabled puck stay solid. Skins are unchanged.
+  - Tokens: `--sonic-touch-action` reaches the dial and the number box, so one set on a wrapper for a slider now reaches dials inside it. `--sonic-radius` reaches every readout; `--sonic-readout-radius-ratio` is new and wins when set. `--sonic-focus-radius` also rounds the focus of a slider and a switch position.
+  - Focus: a visible `--sonic-focus-outline` is drawn on the cap of a button, a segmented option and a dial, where the cap covered it.
+  - Waveform: a repeating key scrubs, as on the wave strip: `input` on each repeat and one `change` on keyup.
+  - Split: `disabled` freezes the members against gestures; a written `value` still lands.
+  - XY pad: `double-press="reset"` (default `none`), `:state(revealed)`, `dragging` and `revealed` getters, and `sonic-reveal`. A form reset during a drag is dropped.
+  - Toggle: a press that slides a few pixels is still a press. A coloured lit toggle takes system colours in forced colours.
+  - Button and switch: a key prevented in a capture listener no longer holds a momentary button, a bat press let go off the switch is cancelled, and an LED in a disabled latched button or option dims where it stayed lit.
+  - Screen: its text can be selected (a screen that is itself a button sets its own `user-select`), and its `--sonic-glass-depth` no longer flattens the well of a button inside it.
+  - The keycap sheen follows `--sonic-light-tilt`.
+
 ## 0.20.0
 
 ### Minor Changes

package/README.md

@@ -2,9 +2,7 @@
 
 Native custom elements for audio interfaces. Each control renders in the light DOM, skinned with `--sonic-*` tokens (CSS custom properties). No framework, no runtime dependencies.
 
-Early and unstable: any 0.x release may break the API.
-
-This README holds what the package's own files do not say. For the rest, read the package:
+Early and unstable: any 0.x release may break the API, and the changelog is where a control's behaviour is described. This README holds setup and the contracts every control shares. For the rest, read the package:
 
 - Properties and methods: `dist/dev/elements/<control>.d.ts`. Every attribute has a property of the same name in camel case.
 - Tokens and their defaults: `dist/styles/<control>.css` and `dist/styles/material/`, where each token is read as `var(--sonic-…, default)`.
@@ -23,6 +21,7 @@ import '@xsynaptic/sonic-ui/define';
 ```css
 @layer base, sonic, components;
 
+@import 'reset.css' layer(base);
 @import '@xsynaptic/sonic-ui/controls.css';
 @import '@xsynaptic/sonic-ui/skins/slate.css';
 ```
@@ -33,117 +32,32 @@ import '@xsynaptic/sonic-ui/define';
 </body>
 ```
 
-- Every sheet sits in the `sonic` layer, so declare it below the layer your own rules live in.
-- A rule outside any layer beats every layered one, so an unlayered reset (`* { margin: 0; padding: 0 }`, a zeroed `border`, a bare `button`) strips padding, borders, type sizes and colours from the controls. Import a reset you do not own into a layer declared before `sonic`:
-
-  ```css
-  @layer base, sonic, components;
-
-  @import 'reset.css' layer(base);
-  ```
+- Every sheet sits in the `sonic` layer. A rule outside any layer beats every layered one, so an unlayered reset strips padding, borders and type from the controls: import a reset into a layer declared before `sonic`, and keep your own rules in one declared after.
+- A skin sheet does nothing until its class, `sonic-skin-<name>`, is on an ancestor. The skins are `slate`, `amber`, `ivory`, `lime` and `flat`. With no skin a control is bare, drawn in the text colour around it.
+- `./define` registers every control and `./define/<control>` registers one. `.` exports the classes and registers nothing.
+- Under a bundler that sets the `development` condition, as Vite's dev server does, the controls warn in the console about a missing sheet, a reset, a box property on a host and a child they do not use. Read the console before debugging.
 
-- A skin sheet does nothing until its class, `sonic-skin-<name>`, is on an ancestor of the controls. The skins are `slate`, `amber`, `ivory`, `lime` and `flat`; a wrapper with another skin's class reskins what is inside it. With no skin a control is bare: no cap and no well, drawn in the text colour around it.
-- `./define` registers every control. `./define/<control>` registers one, and `.` exports the classes and registers nothing.
-- Under a bundler that sets the `development` condition, as Vite's dev server does, the controls warn in the console about a control's own sheet or `material/core.css` missing, a padding lost to an unlayered rule, a box property set on a host, a child they do not use and a binding that found nothing. Read the console before debugging.
+## Contracts
 
-## What every control shares
-
-- The host is `display: contents` and the control is an element inside it. A width, margin or transform on the host does nothing: size a control with its token (`--sonic-dial-size`, `--sonic-slider-length`), which can be set on the host or any ancestor, and place it with its parent's layout.
-- Name every control with `aria-label` or `aria-labelledby` on the host, or with a `<label>` for a form-associated one; the control moves the name onto its focusable part.
+- The host is `display: contents` and the control is an element inside it. A width, margin or transform on the host does nothing: size a control with its token (`--sonic-dial-size`, `--sonic-slider-length`), set on the host or any ancestor, and place it with its parent's layout.
+- The split is the one host with a box: `<sonic-split>` is inline until given a display, and laying it out is yours.
+- Register the classes under their stock tag names (`sonic-dial`, `sonic-split`). The sheets and the split key on them, so a split under another tag finds no members.
+- Name every control with `aria-label` or `aria-labelledby` on the host, or with a `<label>` for a form-associated one.
 - A boolean attribute is on when present, whatever its value, so `pressed="false"` latches a button. From a framework pass `undefined`, never `false`.
-- A control uses only the children it documents below, and adds one child of its own. Under a hydrating framework, register the definitions once hydration is done (in React, from an effect), so the added child is no mismatch.
-- Events bubble and carry no detail: read the property when one fires. A control knows nothing about playback, so wire `input` and `change` to your own state and write `value` back.
-- Buttons, value controls, the segmented control, the switch, the toggle and the XY pad are form-associated: give one a `name` and it submits, resets and restores with its form.
-- States a control sets itself are custom states on the host, selected with `:state()`: `dragging`, `cancelling`, `editing`, `revealed`, `springing`, `modulated`, `pressed`, `held`, `ladder`, `empty` and `pending`.
-
-## Value controls
-
-The dial, the slider, the number box and both wave controls hold one number, from `min` (0) to `max` (100) in steps of `step` (1).
-
-- `input` fires as the value moves and `change` once when a gesture ends, however it ends.
-- A drag owns the value: a write to `value` during one is dropped, so a seek bar fed by `timeupdate` needs no guard of its own.
-- A double press, or Enter, opens typed entry. `double-press="reset"` makes it go back to `default` instead. Cmd-click on Apple platforms, Ctrl-click elsewhere, and Delete reset whichever is chosen, once `default` is set.
-- `formatValue` and `parseValue` are properties holding functions. What the first writes, the second has to read, or typed entry opens on text it cannot take; `formatEntry` covers the case where it cannot.
-- The readout bubble is opt-in, with `readout`. Assistive technology hears the value without it; `formatSpokenValue` words it.
-- `taper="log"` gives even octaves on a range above zero, and `midpoint` bends a range that starts at zero. On a tapered control the arrow keys move by travel; `key-step` makes them move by value.
-- `positions` is a property holding the numbers a stepped control stops at, spaced evenly whatever their values; their labels come from `formatValue`.
-- `modulationValue` is a property only, meant to be written every frame. It moves the light and fires nothing.
-- To take a key from a control, call `preventDefault()` in a capture listener.
-
-## Press controls
-
-A button's children are its legend, an icon or a label, always an element. They are copied into the cap, so the copy has none of your listeners and any id in it is prefixed; keep them static. A child with `data-sonic-when="pressed"` or `"released"` shows only in that state.
-
-```html
-<sonic-button aria-label="Loop" latching>
-	<span class="sonic-led"></span>
-	<svg aria-hidden="true">…</svg>
-</sonic-button>
-```
-
-- A plain button fires `click`. `latching` makes it stay pressed, with `pressed` and a `change` event; `momentary` makes it pressed for as long as it is held, and acts on the press, not the release.
-- `soft-disabled` stops presses but keeps the tab stop, for a button that would otherwise lose focus when it disables itself. `busy` leaves it pressable.
-- The segmented control, the switch and the toggle take one child per position, each with `data-sonic-value`, and hold the chosen one in `value`. They fire `change` only. A switch or a toggle with no children is on or off, held in `checked`.
-- On a position child, `data-sonic-disabled` locks it, `data-sonic-momentary` makes an end position spring back, and on a toggle `data-sonic-lit` lights the well there (`ok`, `warning` or `danger` for the colour). A lock stops the user, not your code: a `value` written to a disabled position is chosen.
-
-```html
-<sonic-segmented aria-label="Filter" value="lp">
-	<span data-sonic-value="lp">LP</span>
-	<span data-sonic-value="bp">BP</span>
-	<span data-sonic-value="hp">HP</span>
-</sonic-segmented>
-```
-
-## Parts that are only a class
-
-The LED, the panel, the ring and the screen have no behaviour, so they are classes on your own elements and need no registration.
-
-- `<span class="sonic-led">` is unlit until it carries `data-sonic-lit`, whose value picks the colour: empty, `idle`, `ok`, `warning` or `danger`. Inside a latching button or a toggle's cap it lights with the control.
-- `class="sonic-ring"` draws a lit arc around its one child, from `--sonic-ring-from` to `--sonic-ring-to`, each 0 to 1. Give it your own `role="progressbar"`.
-- `class="sonic-screen"` is a box of glass that holds your own text, a canvas or a control, and is sized like a `div`: it fills a block, hugs in a flex row, and is never shorter than `--sonic-screen-size`. A wave strip, waveform, spectrum, envelope or XY pad draws no glass of its own, so wrap one in a screen for the encased look; its padding is the inset, and it centres what it holds, so a control that should span it is given its length (`--sonic-wavestrip-length: 100%`). A control with `fill` needs the screen given a height.
-- `class="sonic-panel"` groups controls under a `sonic-panel-title`.
-
-## Displays
-
-A display takes its signal as data and never opens an `AudioContext`.
-
-- `<sonic-meter>`: write `level`, a linear peak amplitude, as often as you have one; the meter converts to decibels and applies its `ballistics`. Write `value` instead to show a number in the meter's own units exactly as given. `segments` turns the bar into a ladder. It fires nothing and has no role: read `peak`, call `resetPeak()`, and announce numbers yourself.
-- `<sonic-spectrum>`: set `analyser` to an `AnalyserNode`, or call `push(decibels)` with a `Float32Array` holding one level per bin and set `sample-rate`.
-
-## Controls that drive other controls
-
-- `<sonic-split>` wraps value controls and keeps their values adding up to `total`. `mode` chooses who gives way (`proportional`, `equal` or `cascade`), and `data-sonic-locked` on a member holds it still. The others move a microtask after the one the user moved, so its `input` arrives first.
-- `<sonic-envelope>` has no value and no events. Each of its attributes (`delay`, `attack`, `hold`, `decay`, `sustain`, `release`, and `attack-curve`, `decay-curve`, `release-curve`) names the id of a dial, a slider or a number box; dragging a handle turns that control, which fires its own `input`. Stages share the width equally, whatever their times.
-- `<sonic-xy>` holds `x` and `y`, each with its own `x-min`, `x-max`, `x-step` and so on, and submits them as `name.x` and `name.y`.
-- `envelopeCurve` and `crossfadeGains` are exported so your DSP computes what the control draws.
-
-## 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 that take their data as properties (`peaks`, `markers`); the types list the rest. `peaks` is `{ pairsPerSecond, samples }`, and the full scale follows the array unless `fullScale` is set.
-
-A wave control shows and reads a clock (`1:23`, typed or drawn) and speaks a duration in the language around it, the nearest `lang`. Setting `formatValue`, `parseValue` or `formatSpokenValue` replaces that part; `formatClock` and `parseClock` are the same pair, exported so your own time text matches.
-
-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 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.
-
-The waveform parks the current marker's label in its corner and fades it after the next marker crosses the playhead, never before: `--sonic-waveform-label-fade-start` (0) and `--sonic-waveform-label-fade-end` (1) run from that crossing, 0, to the next label reaching the park, 1.
-
-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.
-
-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.
-
-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.
+- A control uses only the children it documents and adds one child of its own. Children it draws are copied, so a copy has none of your listeners; keep them static. Under a hydrating framework, register the definitions once hydration is done (in React, from an effect).
+- Events bubble and carry no detail: read the property when one fires. A control knows nothing about playback, so wire its events to your own state and write the property back.
+- A value control fires `input` as its value moves and `change` once when a gesture ends. A drag owns the value: a write to `value` during one is dropped.
+- `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.
+- 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()`.
+- 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
 
-A skin is one rule that sets tokens on a class; copy `dist/skins/flat.css` to start one. Tokens, hook classes (`.sonic-dial`, `.sonic-wavestrip-marker`), `data-sonic-*` attributes and states are the public surface. Anything starting `--_sonic-` is private and changes without notice.
+A skin is one rule that sets tokens on a class; copy `dist/skins/flat.css` to start one. Tokens, hook classes (`.sonic-dial`), `data-sonic-*` attributes and states are the public surface. Anything starting `--_sonic-` is private and changes without notice.
 
 - Set tokens, not rules on hook classes. If a look needs a hook-class rule, a token is missing.
-- Most geometry tokens end in `-ratio` and are a unitless share of the control's size, so one size token scales the whole control.
-- A length token takes any CSS length except a percentage. For a fluid size use container units.
-- `--sonic-relief` runs from 0, flat, to 1, and scales every bevel and shadow at once. `--sonic-light-tilt` turns the one light they all follow.
-- `--sonic-target-size` widens the region that takes a press past the control's box. It is unset by default.
+- A token ending in `-ratio` is a unitless share of the control's size, so one size token scales the whole control. A length token takes any CSS length except a percentage.
 
 ## Loading less
 
@@ -163,7 +77,7 @@ A skin is one rule that sets tokens on a class; copy `dist/skins/flat.css` to st
 | `envelope.css`  | core, glass, readout, bracket                   |
 | `led.css`       | core, lens                                      |
 | `meter.css`     | core, lens, groove                              |
-| `number.css`    | core, cap, glass, pane, well, value             |
+| `number.css`    | core, cap, value                                |
 | `panel.css`     | core                                            |
 | `ring.css`      | core, arc                                       |
 | `screen.css`    | core, glass, pane, well                         |
@@ -176,6 +90,6 @@ A skin is one rule that sets tokens on a class; copy `dist/skins/flat.css` to st
 | `wavestrip.css` | core, cap, glass, readout, value                |
 | `xy.css`        | core, cap, glass, readout, bracket              |
 
-An LED inside a control also needs `led.css`, and a button inside a ring needs `button.css`. No warning names a missing material sheet other than `core.css`, so check a control that draws wrong against this table.
+An LED inside a control also needs `led.css`, and a button inside a ring needs `button.css`. Only a missing `core.css` or control sheet is warned about, so check a control that draws wrong against this table.
 
 Targets current Chrome and Edge, Safari 26 and Firefox 147. No control mirrors for right-to-left. MIT licensed.

package/dist/default/elements/button.js

@@ -167,7 +167,8 @@ var SonicButton = class extends SonicFormElement {
 			holding.hold(event.pointerId);
 		}, { signal });
 		button.addEventListener("keydown", (event) => {
-			if (event.repeat || !holdKeys.has(event.key) || !this.#isMomentary()) return;
+			if (event.repeat || event.defaultPrevented) return;
+			if (!holdKeys.has(event.key) || !this.#isMomentary()) return;
 			holding.hold(event.key);
 		}, { signal });
 	}

package/dist/default/elements/envelope.js

@@ -139,11 +139,10 @@ var SonicEnvelope = class extends SonicElement {
 	#line = requireChild(this.#envelope, ".sonic-envelope-line", SVGElement);
 	#readout = new Readout(requireChild(this.#envelope, ".sonic-envelope-readout", HTMLDivElement));
 	#shape = adsrShape({});
-	#signal;
 	#waiting = /* @__PURE__ */ new Set();
 	#warned = /* @__PURE__ */ new Set();
 	attributeChangedCallback(name) {
-		if (!this.#signal) return;
+		if (!this.isBound()) return;
 		if (name === "disabled") {
 			this.#gesture?.end();
 			this.#draw();
@@ -158,12 +157,10 @@ var SonicEnvelope = class extends SonicElement {
 	}
 	connect(signal) {
 		const envelope = this.#envelope;
-		this.#signal = signal;
 		this.keepControl(envelope, signal);
 		this.#bind();
 		this.#bindPointer(envelope, signal);
 		signal.addEventListener("abort", () => {
-			this.#signal = void 0;
 			this.#unbind();
 		}, { once: true });
 	}
@@ -201,7 +198,7 @@ var SonicEnvelope = class extends SonicElement {
 			release: ({ drives }, moved) => {
 				for (const { axis, binding } of drives) {
 					if (!moved.includes(axis)) continue;
-					binding.element.dispatchEvent(new Event("change", { bubbles: true }));
+					binding.link.change();
 				}
 			},
 			toggle: (isDragging) => {
@@ -308,7 +305,7 @@ var SonicEnvelope = class extends SonicElement {
 		this.#waiting.add(key);
 		arrives(() => {
 			this.#waiting.delete(key);
-			if (this.#signal) this.#bind();
+			if (this.isBound()) this.#bind();
 		});
 	}
 	#renderReadout() {

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

@@ -53,6 +53,9 @@ function bindFieldGesture(target, options, signal) {
 				})
 			};
 		},
+		lift: ({ hold }, event) => {
+			options.lift?.(hold, event);
+		},
 		move: (held, event) => {
 			const { axes } = held.hold;
 			const step = stepFieldDrag({

package/dist/default/elements/split.js

@@ -58,12 +58,12 @@ var SonicSplit = class extends SonicElement {
 	#isWarned = false;
 	#isWriting = false;
 	#members = [];
-	#signal;
 	#snapshot;
 	#total = 0;
 	#waiting = /* @__PURE__ */ new Set();
 	attributeChangedCallback(name) {
-		if ((name === "mode" || name === "total") && this.#signal) this.#bind();
+		if ((name === "mode" || name === "total") && this.isBound()) this.#bind();
+		if (name === "disabled" && this.isBound()) this.#limit();
 	}
 	connectedCallback() {
 		this.upgradeProperties("mode", "total");
@@ -73,7 +73,6 @@ var SonicSplit = class extends SonicElement {
 		const observer = new MutationObserver((records) => {
 			if (records.some((record) => record.attributeName !== null && lockAttributes.includes(record.attributeName)) || !this.#isSameMembers(this.#find())) this.#bind();
 		});
-		this.#signal = signal;
 		if (this.internals) this.internals.role = "group";
 		observer.observe(this, {
 			attributeFilter: lockAttributes,
@@ -86,7 +85,6 @@ var SonicSplit = class extends SonicElement {
 		}, { signal });
 		signal.addEventListener("abort", () => {
 			observer.disconnect();
-			this.#signal = void 0;
 			this.#isTotalKept = false;
 			this.#unbind();
 		}, { once: true });
@@ -152,11 +150,12 @@ var SonicSplit = class extends SonicElement {
 		})[index] ?? target;
 	}
 	#limit() {
+		const isFrozen = this.isDisabled();
 		const values = this.#members.map(({ seen }) => seen);
 		for (const [index, member] of this.#members.entries()) {
 			const model = this.#model(values, member);
 			const value = values[index] ?? member.seen;
-			member.link.model.setLimit(isLocked(member) ? [value, value] : gridLimits(member.link.model.mapping(), splitLimits(model, index, this.#total)));
+			member.link.model.setLimit(isFrozen || isLocked(member) ? [value, value] : gridLimits(member.link.model.mapping(), splitLimits(model, index, this.#total)));
 		}
 	}
 	#model(values, mover) {
@@ -192,7 +191,7 @@ var SonicSplit = class extends SonicElement {
 		queueMicrotask(() => {
 			this.#isWriting = true;
 			try {
-				for (const { element } of changed) element.dispatchEvent(new Event("change", { bubbles: true }));
+				for (const { link } of changed) link.change();
 			} finally {
 				this.#isWriting = false;
 			}
@@ -226,7 +225,7 @@ var SonicSplit = class extends SonicElement {
 		this.#waiting.add(tag);
 		customElements.whenDefined(tag).then(() => {
 			this.#waiting.delete(tag);
-			if (this.#signal) this.#bind();
+			if (this.isBound()) this.#bind();
 		});
 	}
 	#warnReach() {}

package/dist/default/elements/switch.js

@@ -1,5 +1,5 @@
 import { requireChild, template } from "../lib/render.js";
-import { bindDrag } from "../lib/pointer-drag.js";
+import { bindDrag, capturePointer } from "../lib/pointer-drag.js";
 import { soleStep } from "../lib/positions.js";
 import { isUnder } from "./radio-group.js";
 import { SonicPositionGroupElement } from "./position-group.js";
@@ -28,7 +28,7 @@ var SonicSwitch = class extends SonicPositionGroupElement {
 		if (this.#isOnBat(event)) return true;
 		const target = this.pressTarget(index);
 		if (this.isOptionDisabled(target) || !this.isMomentary(target)) return false;
-		this.group.setPointerCapture(event.pointerId);
+		capturePointer(this.group, event.pointerId);
 		this.hold(target, event.pointerId);
 		return true;
 	}
@@ -68,8 +68,10 @@ var SonicSwitch = class extends SonicPositionGroupElement {
 				};
 			},
 			lift: (press, event) => {
-				if (!press.hasMoved && !this.isDisabled()) this.#pressBat(event);
 				this.#isClickSwallowed = true;
+				if (press.hasMoved || this.isDisabled()) return;
+				if (!isUnder(this.group, event.clientX, event.clientY)) return;
+				this.#pressBat(event);
 			},
 			move: (press, event) => {
 				if (this.isDisabled()) return;

package/dist/default/elements/toggle.js

@@ -19,6 +19,7 @@ const renderPosition = template(`
 		</button>
 	`, HTMLButtonElement);
 const renderBare = template(`<button class="sonic-toggle-position" role="switch" type="button"></button>`, HTMLButtonElement);
+const pressSlop = 2;
 var SonicToggle = class extends SonicPositionGroupElement {
 	bare = renderBare();
 	defaultOrientation = "horizontal";
@@ -60,17 +61,19 @@ var SonicToggle = class extends SonicPositionGroupElement {
 		bindDrag(this.group, {
 			grab: (event) => this.#grab(event),
 			lift: (drag, event) => {
-				if (drag.hasMoved || drag.isHolding || this.isDisabled()) return;
+				if (!drag.isPress || drag.isHolding || this.isDisabled()) return;
 				if (!isUnder(this.group, event.clientX, event.clientY)) return;
 				this.#press(drag.position);
 			},
 			move: (drag, event) => {
 				if (drag.isHolding || this.isDisabled()) return;
 				const pointer = this.along(event);
-				if (!drag.hasMoved && Math.abs(pointer - drag.start) < drag.thresholdPx) return;
+				const moved = Math.abs(pointer - drag.start);
+				if (!drag.hasMoved && moved < drag.thresholdPx) return;
 				drag.hasMoved = true;
 				this.toggleState("dragging", true);
-				this.#slideTo(positionAt(drag.travel, pointer), event.pointerId);
+				if (moved >= pressSlop * drag.thresholdPx) drag.isPress = false;
+				if (this.#slideTo(positionAt(drag.travel, pointer), event.pointerId)) drag.isPress = false;
 			},
 			release: (drag) => {
 				delete drag.marked.dataset.sonicPressed;
@@ -95,6 +98,7 @@ var SonicToggle = class extends SonicPositionGroupElement {
 		return {
 			hasMoved: false,
 			isHolding: this.#holdFrom(position, event.pointerId),
+			isPress: true,
 			marked,
 			position,
 			start: this.along(event),
@@ -124,12 +128,13 @@ var SonicToggle = class extends SonicPositionGroupElement {
 		const crossed = Math.round(at);
 		this.#draggedTo = at;
 		this.#placeCap(at);
-		if (this.isChecked(crossed)) return;
+		if (this.isChecked(crossed)) return false;
 		this.releaseHold();
-		if (this.isOptionDisabled(crossed) || this.isChecked(crossed)) return;
+		if (this.isOptionDisabled(crossed) || this.isChecked(crossed)) return false;
 		if (this.isMomentary(crossed)) this.hold(crossed, pointerId);
 		else this.select(crossed);
 		this.refocusAt(crossed);
+		return true;
 	}
 	#travel(event, isOnCap) {
 		const [first, last] = enabledEnds(this.positions());

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

@@ -52,6 +52,9 @@ var SonicValueElement = class extends SonicFormElement {
 	];
 	static {
 		link = (element) => ({
+			change: () => {
+				element.dispatchEvent(new Event("change", { bubbles: true }));
+			},
 			input: (next, isMover = false) => (isMover || !element.#isHeld()) && element.input(next),
 			isDisabled: () => element.isDisabled(),
 			isHeld: () => element.#isHeld(),

package/dist/default/elements/value-entry.js

@@ -1,17 +1,13 @@
+import { createDoublePress } from "../lib/double-press.js";
+
 //#region src/elements/value-entry.ts
-const doublePressMs = 500;
-const doublePressPx = 4;
-function isDoublePress(previous, next) {
-	if (!previous) return false;
-	return next.time - previous.time < doublePressMs && Math.hypot(next.x - previous.x, next.y - previous.y) < doublePressPx;
-}
 var ValueEntry = class {
 	get isOpen() {
 		return this.#isOpen;
 	}
+	#doublePress = createDoublePress();
 	#input;
 	#isOpen = false;
-	#lastPress;
 	#openedText = "";
 	#options;
 	constructor(input, options) {
@@ -44,7 +40,7 @@ var ValueEntry = class {
 		if (isCommitting && this.#input.value !== this.#openedText) this.#options.commit(this.#input.value);
 	}
 	forgetPress() {
-		this.#lastPress = void 0;
+		this.#doublePress.forget();
 	}
 	open() {
 		const input = this.#input;
@@ -57,16 +53,7 @@ var ValueEntry = class {
 		input.select();
 	}
 	press(event) {
-		const press = {
-			time: event.timeStamp,
-			x: event.clientX,
-			y: event.clientY
-		};
-		const previous = this.#lastPress;
-		this.#lastPress = press;
-		if (!isDoublePress(previous, press)) return false;
-		this.#lastPress = void 0;
-		return true;
+		return this.#doublePress.press(event);
 	}
 };
 

package/dist/default/elements/waveform.js

@@ -287,6 +287,14 @@ var SonicWaveform = class extends SonicWaveElement {
 		}]));
 		this.surface()?.rebuild();
 	}
+	scrubChanged() {
+		const isScrubbing = this.scrubState().from !== void 0;
+		this.#grabbed = isScrubbing ? this.#grabbed ?? this.#lastDrawn() : void 0;
+		super.scrubChanged();
+	}
+	scrubsKeyRepeat() {
+		return true;
+	}
 	#duePending() {
 		const due = dueRegions(this.#pending, this.#pendingListedMs, [performance.now(), this.pendingDelay]);
 		if (due.length < this.#pending.length) this.surface()?.requestFrame();
@@ -294,10 +302,7 @@ var SonicWaveform = class extends SonicWaveElement {
 	}
 	#grab() {
 		if (this.#zoomGesture?.isPinching() === true) return void 0;
-		const drawn = this.#drawn ?? {
-			seconds: this.value,
-			startSeconds: this.value
-		};
+		const drawn = this.#lastDrawn();
 		this.#grabbed = drawn;
 		const mapping = this.mapping();
 		const [low, high] = mapping.bounds;
@@ -317,6 +322,12 @@ var SonicWaveform = class extends SonicWaveElement {
 			seconds: this.value === from ? grabbed.seconds : this.value
 		};
 	}
+	#lastDrawn() {
+		return this.#drawn ?? {
+			seconds: this.value,
+			startSeconds: this.value
+		};
+	}
 	#readKindColours() {
 		const kinds = [...new Set(this.markers.map(({ kind }) => kind).filter((kind) => isKind(kind)))];
 		const probes = kinds.map((kind) => {

package/dist/default/elements/xy.js

@@ -4,6 +4,7 @@ import { SonicFormElement } from "./form-element.js";
 import { requireChild, template } from "../lib/render.js";
 import { Readout } from "./readout.js";
 import { ReadoutClaim } from "./readout-claim.js";
+import { createDoublePress } from "../lib/double-press.js";
 import { focusByPointer } from "../lib/focus-by-pointer.js";
 import { isMenuPress, isResetPress } from "../lib/modifier-press.js";
 import { resetKeys } from "../lib/value-mapping.js";
@@ -66,6 +67,15 @@ var SonicXy = class extends SonicFormElement {
 		"y-step",
 		"y-taper"
 	];
+	get doublePress() {
+		return this.getAttribute("double-press") === "reset" ? "reset" : "none";
+	}
+	set doublePress(gesture) {
+		this.reflect("double-press", gesture);
+	}
+	get dragging() {
+		return this.hasState("dragging");
+	}
 	get formatValue() {
 		return this.#formatValue;
 	}
@@ -82,6 +92,9 @@ var SonicXy = class extends SonicFormElement {
 	set readout(isEnabled) {
 		this.reflect("readout", isEnabled);
 	}
+	get revealed() {
+		return this.hasState("revealed");
+	}
 	get x() {
 		return this.#models.x.value;
 	}
@@ -194,10 +207,12 @@ var SonicXy = class extends SonicFormElement {
 		this.#renderReadout();
 	});
 	#currentAxis = "x";
+	#doublePress = createDoublePress();
 	#xy = renderXy();
 	#field = requireChild(this.#xy, ".sonic-xy-field", HTMLDivElement);
 	#formatValue;
 	#gesture;
+	#isRevealed = false;
 	#models = {
 		x: createValueModel(() => this.#spec("x")),
 		y: createValueModel(() => this.#spec("y"))
@@ -214,10 +229,11 @@ var SonicXy = class extends SonicFormElement {
 		this.#respec(name);
 	}
 	connectedCallback() {
-		this.upgradeProperties("readout", "xDefault", "xLabel", "xMax", "xMidpoint", "xMin", "xOrigin", "xStep", "xTaper", "yDefault", "yLabel", "yMax", "yMidpoint", "yMin", "yOrigin", "yStep", "yTaper", "formatValue", "x", "y");
+		this.upgradeProperties("doublePress", "readout", "xDefault", "xLabel", "xMax", "xMidpoint", "xMin", "xOrigin", "xStep", "xTaper", "yDefault", "yLabel", "yMax", "yMidpoint", "yMin", "yOrigin", "yStep", "yTaper", "formatValue", "x", "y");
 		super.connectedCallback();
 	}
 	formResetCallback() {
+		if (this.#gesture?.current()) return;
 		this.#respec(...axes);
 	}
 	connect(signal) {
@@ -259,23 +275,26 @@ var SonicXy = class extends SonicFormElement {
 			const move = keyMoves.get(event.key);
 			if (!move && !(resetKeys.has(event.key) && this.#hasDefault())) return;
 			event.preventDefault();
-			if (move) this.#keyTo(...move);
-			else this.#reset();
 			this.#claim.reveal("keys");
 			this.#renderReadout();
+			if (move) this.#keyTo(...move);
+			else this.#reset();
 		}, { signal });
 		xy.addEventListener("focusout", (event) => {
 			if (event.relatedTarget instanceof Node && xy.contains(event.relatedTarget)) return;
 			if (this.#claim.conceal("keys")) this.#renderReadout();
 		}, { signal });
 		signal.addEventListener("abort", () => {
-			this.#claim.conceal("keys");
+			if (this.#claim.conceal("keys")) this.#renderReadout();
 		}, { once: true });
 	}
 	#bindPointer(xy, signal) {
 		xy.addEventListener("mousedown", (event) => {
 			event.preventDefault();
 		}, { signal });
+		xy.addEventListener("pointercancel", () => {
+			this.#doublePress.forget();
+		}, { signal });
 		this.#gesture = bindFieldGesture(xy, {
 			claim: this.#claim,
 			grab: (event) => {
@@ -290,6 +309,10 @@ var SonicXy = class extends SonicFormElement {
 			input: (_hold, next) => {
 				if (!this.#input(next)) this.#renderReadout();
 			},
+			lift: (_hold, event) => {
+				if (!this.#doublePress.press(event) || this.doublePress !== "reset") return;
+				this.#reset();
+			},
 			release: (_hold, moved) => {
 				if (moved.length > 0) this.dispatchEvent(new Event("change", { bubbles: true }));
 			},
@@ -393,11 +416,16 @@ var SonicXy = class extends SonicFormElement {
 		this.writeFormValue(fields, state);
 	}
 	#renderReadout() {
+		const { isRevealed } = this.#claim;
 		this.#readout.show({
 			anchor: this.#puck,
-			isOpen: this.#claim.isRevealed && this.readout,
+			isOpen: isRevealed && this.readout,
 			text: this.#valueText("x")
 		});
+		if (isRevealed === this.#isRevealed) return;
+		this.#isRevealed = isRevealed;
+		this.toggleState("revealed", isRevealed);
+		this.dispatchEvent(new Event("sonic-reveal", { bubbles: true }));
 	}
 	#reset() {
 		this.#commit({