@tremolo-ui/svelte 0.8.0 → 0.9.0

package/dist/components/NumberInput/Stepper.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/Stepper.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC5C,GAAG,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AA4DJ,QAAA,MAAM,OAAO,8CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Stepper.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/Stepper.svelte.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC5C,GAAG,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AAwEJ,QAAA,MAAM,OAAO,8CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/NumberInput/StepperButton.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
   import { longPress } from '../../actions/long-press.js'
 
-  import { useNumberInputContext, useStepperContext } from './context.js'
+  import {
+    useNumberInputContext,
+    useNumberInputGesture,
+    useStepperContext,
+  } from './context.js'
 
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
@@ -15,6 +19,7 @@
 
   const field = useNumberInputContext()
   const stepper = useStepperContext()
+  const gesture = useNumberInputGesture()
 
   const blocked = $derived(
     field.disabled || (direction > 0 ? field.atMax : field.atMin),
@@ -23,6 +28,9 @@
   const pressOptions = {
     onPress: () => {
       if (field.disabled || field.readonly) return
+      // Here rather than on pointerdown: the press moves the value from the
+      // action's own listener, which runs before a delegated one would.
+      gesture?.press()
       // Once the pointer has actually travelled, the drag on `Stepper` owns
       // the value; repeating on top of it would move it twice.
       if (stepper?.moved()) return

package/dist/components/NumberInput/StepperButton.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepperButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/StepperButton.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC5C,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AA2CJ,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"StepperButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/StepperButton.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC5C,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AA+CJ,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/NumberInput/context.d.ts

@@ -12,6 +12,7 @@ export interface NumberInputContextValue {
     readonly drag: number | null;
     readonly dragSensitivity: ModifierValue<number>;
     readonly pointerLock: boolean;
+    readonly dragCursor: string;
     readonly selectOnFocus: 'all' | 'number' | 'none';
     readonly unformatOnFocus: boolean;
     readonly keepCaretOnStep: boolean;
@@ -39,6 +40,15 @@ export interface NumberInputContextValue {
 /** The context of the enclosing `NumberInput.Root`, for a part of your own. */
 export declare const useNumberInputContext: () => NumberInputContextValue;
 export declare const setNumberInputContext: (context: NumberInputContextValue) => NumberInputContextValue;
+/** @internal The change gesture of `Root`, for the parts that change the value. */
+export interface NumberInputGestureValue {
+    /** A press on a stepper, held until the pointer is released anywhere. */
+    press: () => void;
+    /** An arrow key in `InputField`. */
+    key: () => void;
+}
+export declare const useNumberInputGesture: () => NumberInputGestureValue | null;
+export declare const setNumberInputGesture: (context: NumberInputGestureValue) => NumberInputGestureValue;
 /** @internal Whether the drag on `Stepper` has moved the value. */
 export interface StepperContextValue {
     moved: () => boolean;

package/dist/components/NumberInput/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,gBAAgB,EAChB,aAAa,EACb,aAAa,EACd,MAAM,iBAAiB,CAAA;AACxB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAEvD,8EAA8E;AAC9E,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;IAChC,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;IAChC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACzD,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,eAAe,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAC/C,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,aAAa,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;IACjD,QAAQ,CAAC,eAAe,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,eAAe,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAA;IAC7B,8EAA8E;IAC9E,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,qEAAqE;IACrE,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAA;IACvB,iEAAiE;IACjE,QAAQ,CAAC,QAAQ,EAAE,UAAU,CAAA;IAC7B,gEAAgE;IAChE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,qEAAqE;IACrE,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,yCAAyC;IACzC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,+CAA+C;IAC/C,KAAK,EAAE,CACL,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,aAAa,CAAC,gBAAgB,CAAC,EACvC,SAAS,CAAC,EAAE,aAAa,KACtB,IAAI,CAAA;IACT,qEAAqE;IACrE,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAA;CACnD;AAID,+EAA+E;AAC/E,eAAO,MAAM,qBAAqB,+BAAM,CAAA;AACxC,eAAO,MAAM,qBAAqB,+DAAM,CAAA;AAExC,mEAAmE;AACnE,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,OAAO,CAAA;CACrB;AAKD,eAAO,MAAM,iBAAiB,kCAA6C,CAAA;AAC3E,eAAO,MAAM,iBAAiB,uDAAa,CAAA"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,gBAAgB,EAChB,aAAa,EACb,aAAa,EACd,MAAM,iBAAiB,CAAA;AACxB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAEvD,8EAA8E;AAC9E,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;IAChC,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;IAChC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACzD,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,eAAe,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAC/C,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,aAAa,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;IACjD,QAAQ,CAAC,eAAe,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,eAAe,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAA;IAC7B,8EAA8E;IAC9E,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,qEAAqE;IACrE,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAA;IACvB,iEAAiE;IACjE,QAAQ,CAAC,QAAQ,EAAE,UAAU,CAAA;IAC7B,gEAAgE;IAChE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,qEAAqE;IACrE,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,yCAAyC;IACzC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,+CAA+C;IAC/C,KAAK,EAAE,CACL,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,aAAa,CAAC,gBAAgB,CAAC,EACvC,SAAS,CAAC,EAAE,aAAa,KACtB,IAAI,CAAA;IACT,qEAAqE;IACrE,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAA;CACnD;AAID,+EAA+E;AAC/E,eAAO,MAAM,qBAAqB,+BAAM,CAAA;AACxC,eAAO,MAAM,qBAAqB,+DAAM,CAAA;AAExC,mFAAmF;AACnF,MAAM,WAAW,uBAAuB;IACtC,yEAAyE;IACzE,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,oCAAoC;IACpC,GAAG,EAAE,MAAM,IAAI,CAAA;CAChB;AAKD,eAAO,MAAM,qBAAqB,sCAA6C,CAAA;AAC/E,eAAO,MAAM,qBAAqB,+DAAa,CAAA;AAE/C,mEAAmE;AACnE,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,OAAO,CAAA;CACrB;AAKD,eAAO,MAAM,iBAAiB,kCAA6C,CAAA;AAC3E,eAAO,MAAM,iBAAiB,uDAAa,CAAA"}

package/dist/components/NumberInput/context.js

@@ -3,6 +3,9 @@ const [get, set] = createContext();
 /** The context of the enclosing `NumberInput.Root`, for a part of your own. */
 export const useNumberInputContext = get;
 export const setNumberInputContext = set;
+const [getGesture, setGesture, hasGesture] = createContext();
+export const useNumberInputGesture = () => (hasGesture() ? getGesture() : null);
+export const setNumberInputGesture = setGesture;
 const [getStepper, setStepper, hasStepper] = createContext();
 export const useStepperContext = () => (hasStepper() ? getStepper() : null);
 export const setStepperContext = setStepper;

package/dist/components/NumberInput/types.d.ts

@@ -1,4 +1,4 @@
-import type { InputEventOption, ModifierValue } from '@tremolo-ui/dom';
+import type { ChangeSource, InputEventOption, ModifierValue } from '@tremolo-ui/dom';
 import type { Scale } from '@tremolo-ui/functions';
 import type { Snippet } from 'svelte';
 export interface NumberInputProps {
@@ -65,6 +65,11 @@ export interface NumberInputProps {
      * @default false
      */
     pointerLock?: boolean;
+    /**
+     * The cursor to show while dragging a `Stepper`.
+     * @default 'ns-resize'
+     */
+    dragCursor?: string;
     /**
      * Select the text when `InputField` takes focus: all of it, only the
      * number without its unit, or nothing.
@@ -96,6 +101,25 @@ export interface NumberInputProps {
      * committed or stepped.
      */
     onChange?: (value: number) => void;
+    /**
+     * Called when a change of the value starts — a press on a stepper, the
+     * first wheel notch, arrow key or typed character — with the value before
+     * it and what it is made with. A host recording automation can treat the
+     * input as touched from here until `onChangeEnd`.
+     */
+    onChangeStart?: (value: number, source: ChangeSource) => void;
+    /**
+     * Called when the change ends, with the value it ended on: when the stepper
+     * is released, when typed text is committed, or `changeEndDelay` after the
+     * last wheel notch or arrow key.
+     */
+    onChangeEnd?: (value: number, source: ChangeSource) => void;
+    /**
+     * How long after the last wheel notch, arrow key or typed character the
+     * change counts as over, in milliseconds.
+     * @default 500
+     */
+    changeEndDelay?: number;
     /** The root element, bound with `bind:ref`. */
     ref?: HTMLDivElement | null;
     /** The input renders exactly what you compose here. */

package/dist/components/NumberInput/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AACtE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAElD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,WAAW,gBAAgB;IAC/B,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wDAAwD;IACxD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IAChC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IAC9C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACjD;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IACvC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;IACzC;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,+CAA+C;IAC/C,GAAG,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC3B,uDAAuD;IACvD,QAAQ,EAAE,OAAO,CAAA;CAClB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EACZ,gBAAgB,EAChB,aAAa,EACd,MAAM,iBAAiB,CAAA;AACxB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAElD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,WAAW,gBAAgB;IAC/B,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wDAAwD;IACxD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IAChC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IAC9C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACjD;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IACvC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;IACzC;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAA;IAC7D;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAA;IAC3D;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,+CAA+C;IAC/C,GAAG,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC3B,uDAAuD;IACvD,QAAQ,EAAE,OAAO,CAAA;CAClB"}

package/dist/components/Piano/Root.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
   import {
-    blackKeyWidth,
     createPianoInput,
-    fitWhiteKeyWidth,
-    getNoteRangeArray,
     notePosition,
-    pianoWidth,
     type PianoInputInstance,
     type PianoLayout,
   } from '@tremolo-ui/dom'
+  import {
+    blackKeyWidth,
+    fitWhiteKeyWidth,
+    getNoteRangeArray,
+    pianoWidth,
+  } from '@tremolo-ui/dom/internal'
   import { isWhiteKey, noteKey } from '@tremolo-ui/functions'
   import { untrack } from 'svelte'
 

package/dist/components/Piano/Root.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Root.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Piano/Root.svelte.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAY,UAAU,EAAE,MAAM,YAAY,CAAA;AAEtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,UAAU,GACrB,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,UAAU,CAAC,CAAC;AAsJ3D,QAAA,MAAM,IAAI;qBA9CiB,MAAM,aAAa,MAAM;qBAKzB,MAAM;SAyCiB,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Root.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Piano/Root.svelte.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAY,UAAU,EAAE,MAAM,YAAY,CAAA;AAEtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,UAAU,GACrB,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,UAAU,CAAC,CAAC;AAuJ3D,QAAA,MAAM,IAAI;qBA9CiB,MAAM,aAAa,MAAM;qBAKzB,MAAM;SAyCiB,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/PointsEditor/Container.svelte

@@ -1,10 +1,6 @@
 <script lang="ts">
-  import {
-    createDragValue,
-    elementMapping,
-    POINT_AXIS,
-    wheelMove,
-  } from '@tremolo-ui/dom'
+  import { createDragValue, elementMapping } from '@tremolo-ui/dom'
+  import { POINT_AXIS, wheelMove } from '@tremolo-ui/dom/internal'
 
   import { wheel as wheelAction } from '../../actions/wheel.js'
   import { setPlacement } from '../_util/placement.js'

package/dist/components/PointsEditor/Container.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/PointsEditor/Container.svelte.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC5C,GAAG,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AAuEJ,QAAA,MAAM,SAAS,8CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Container.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/PointsEditor/Container.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC5C,GAAG,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AAwEJ,QAAA,MAAM,SAAS,8CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/PointsEditor/Point.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
   import {
-    arrowKeyMove,
-    clampPoint,
     createDragValue,
     elementMapping,
-    POINT_AXIS,
-    selectModifier,
     type PointPosition,
     type PointsEditorPoint,
   } from '@tremolo-ui/dom'
+  import {
+    arrowKeyMove,
+    clampPoint,
+    POINT_AXIS,
+    selectModifier,
+  } from '@tremolo-ui/dom/internal'
   import { untrack } from 'svelte'
 
+  import { useChangeGesture } from '../_util/change-gesture.svelte.js'
   import { checkPlacement } from '../_util/placement.js'
   import VisuallyHiddenRangeInput from '../_util/VisuallyHiddenRangeInput.svelte'
 
@@ -35,8 +38,9 @@
     'aria-label': ariaLabel,
     'aria-valuetext': ariaValuetext,
     onChange,
-    onDragStart,
-    onDragEnd,
+    onChangeStart,
+    onChangeEnd,
+    changeEndDelay,
     children,
     style,
     onfocus,
@@ -61,6 +65,14 @@
   const selected = $derived(points.selection.includes(id))
   const current = $derived(clampPoint(value, min, max))
 
+  const gesture = useChangeGesture(() => ({
+    value: current,
+    inactive,
+    onChangeStart,
+    onChangeEnd,
+    changeEndDelay,
+  }))
+
   let element: HTMLDivElement | null = $state(null)
   let xInput: HTMLInputElement | null = $state(null)
   let dragging = $state(false)
@@ -75,6 +87,7 @@
     onChange,
     element,
     wheel,
+    beforeWheel: () => gesture.pulse('wheel'),
   })
 
   $effect(() => points.editor.registerPoint(id, read))
@@ -92,7 +105,7 @@
         sensitivity: (state) =>
           selectModifier(points.dragSensitivity, state.event).value,
       }),
-      cursor: untrack(() => (inactive ? undefined : points.cursor)),
+      cursor: untrack(() => (inactive ? undefined : points.dragCursor)),
       shouldStart: () => !disabled,
       // The value is a move rather than a position: the point keeps the
       // offset it was grabbed at, and everything else selected moves with it.
@@ -105,16 +118,16 @@
         origin = { x, y }
         dragging = true
         xInput?.focus()
-        if (!inactive) onDragStart?.(clampPoint(value, min, max))
+        if (!inactive) gesture.hold('pointer')
       },
       onDragEnd: () => {
         origin = null
         dragging = false
-        if (!inactive) onDragEnd?.(clampPoint(value, min, max))
+        gesture.end()
       },
     })
     $effect(() => {
-      drag.update({ cursor: inactive ? undefined : points.cursor })
+      drag.update({ cursor: inactive ? undefined : points.dragCursor })
     })
     return () => drag.destroy()
   })
@@ -170,6 +183,7 @@
     if (move) {
       event.preventDefault()
       if (onChange && !inactive && keyboard) {
+        gesture.pulse('keyboard')
         points.editor.nudgePoint(
           id,
           move.axis === 0 ? 'x' : 'y',

package/dist/components/PointsEditor/Point.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Point.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/PointsEditor/Point.svelte.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAA;AAExD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,sBAAsB,GACjC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,sBAAsB,CAAC,CAAC;AAmKvE,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Point.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/PointsEditor/Point.svelte.ts"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAA;AAExD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,sBAAsB,GACjC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,sBAAsB,CAAC,CAAC;AAgLvE,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/PointsEditor/Root.svelte

@@ -2,10 +2,12 @@
   import {
     createPointsEditor,
     DEFAULT_DRAG_SENSITIVITY,
-    POINTS_EDITOR_DEFAULT_KEYBOARD,
-    POINTS_EDITOR_DEFAULT_WHEEL,
     type SelectionBoxRect,
   } from '@tremolo-ui/dom'
+  import {
+    POINTS_EDITOR_DEFAULT_KEYBOARD,
+    POINTS_EDITOR_DEFAULT_WHEEL,
+  } from '@tremolo-ui/dom/internal'
 
   import { setPointsEditorContext } from './context.js'
   import type { PointsEditorProps } from './types.js'
@@ -18,7 +20,7 @@
   let {
     disabled = false,
     readonly = false,
-    externalStyles,
+    dragCursor = 'grabbing',
     wheel = POINTS_EDITOR_DEFAULT_WHEEL,
     keyboard = POINTS_EDITOR_DEFAULT_KEYBOARD,
     dragSensitivity = DEFAULT_DRAG_SENSITIVITY,
@@ -73,8 +75,8 @@
     get dragSensitivity() {
       return dragSensitivity
     },
-    get cursor() {
-      return externalStyles?.cursor ?? 'grabbing'
+    get dragCursor() {
+      return dragCursor
     },
     get selectable() {
       return selectable

package/dist/components/PointsEditor/Root.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Root.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/PointsEditor/Root.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAEnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,iBAAiB,GAC5B,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,iBAAiB,CAAC,CAAC;AAiGlE,QAAA,MAAM,IAAI,4DAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Root.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/PointsEditor/Root.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAEnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,iBAAiB,GAC5B,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,iBAAiB,CAAC,CAAC;AAkGlE,QAAA,MAAM,IAAI,4DAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/PointsEditor/context.d.ts

@@ -6,7 +6,7 @@ export interface PointsEditorContextValue {
     readonly wheel: ModifierValue<InputEventOption> | null;
     readonly keyboard: ModifierValue<InputEventOption> | null;
     readonly dragSensitivity: ModifierValue<number>;
-    readonly cursor: string;
+    readonly dragCursor: string;
     readonly selectable: boolean;
     /** Ids of the selected points. Always empty while `selectable` is off. */
     readonly selection: readonly string[];

package/dist/components/PointsEditor/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/PointsEditor/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,gBAAgB,EAChB,aAAa,EACb,oBAAoB,EACpB,gBAAgB,EACjB,MAAM,iBAAiB,CAAA;AAExB,+EAA+E;AAC/E,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACtD,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACzD,QAAQ,CAAC,eAAe,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAC/C,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAA;IAC5B,0EAA0E;IAC1E,QAAQ,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAA;IACrC,qDAAqD;IACrD,QAAQ,CAAC,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC9C,6DAA6D;IAC7D,QAAQ,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,CAAA;IACtC;;;OAGG;IACH,QAAQ,CAAC,MAAM,EAAE,oBAAoB,CAAA;IACrC,mDAAmD;IACnD,YAAY,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;CACpD;AAID,gFAAgF;AAChF,eAAO,MAAM,sBAAsB,gCAAM,CAAA;AACzC,eAAO,MAAM,sBAAsB,iEAAM,CAAA"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/PointsEditor/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,gBAAgB,EAChB,aAAa,EACb,oBAAoB,EACpB,gBAAgB,EACjB,MAAM,iBAAiB,CAAA;AAExB,+EAA+E;AAC/E,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACtD,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACzD,QAAQ,CAAC,eAAe,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAC/C,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAA;IAC5B,0EAA0E;IAC1E,QAAQ,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAA;IACrC,qDAAqD;IACrD,QAAQ,CAAC,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC9C,6DAA6D;IAC7D,QAAQ,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,CAAA;IACtC;;;OAGG;IACH,QAAQ,CAAC,MAAM,EAAE,oBAAoB,CAAA;IACrC,mDAAmD;IACnD,YAAY,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;CACpD;AAID,gFAAgF;AAChF,eAAO,MAAM,sBAAsB,gCAAM,CAAA;AACzC,eAAO,MAAM,sBAAsB,iEAAM,CAAA"}

package/dist/components/PointsEditor/types.d.ts

@@ -1,4 +1,4 @@
-import type { InputEventOption, ModifierValue, PointPosition } from '@tremolo-ui/dom';
+import type { ChangeSource, InputEventOption, ModifierValue, PointPosition } from '@tremolo-ui/dom';
 import type { Snippet } from 'svelte';
 export interface PointsEditorProps {
     /** Make the points unchangeable and remove them from the tab order. */
@@ -7,11 +7,9 @@ export interface PointsEditorProps {
     readonly?: boolean;
     /**
      * The cursor to show while dragging a point.
-     * @default { cursor: 'grabbing' }
+     * @default 'grabbing'
      */
-    externalStyles?: {
-        cursor?: string;
-    };
+    dragCursor?: string;
     /**
      * How much one notch of the wheel moves the focused `Point`. Scrolling
      * sideways, or with shift held, moves x. A `Point` can override it.
@@ -77,8 +75,24 @@ export interface PointsEditorPointProps {
      * moves along with a selection.
      */
     onChange?: (value: PointPosition) => void;
-    onDragStart?: (value: PointPosition) => void;
-    onDragEnd?: (value: PointPosition) => void;
+    /**
+     * Called when a change of this point starts — a drag on it, the first wheel
+     * notch or arrow key while it has the focus — with where it is and what the
+     * change is made with. The points that move along with a selection report
+     * through `onChange` only.
+     */
+    onChangeStart?: (value: PointPosition, source: ChangeSource) => void;
+    /**
+     * Called when that change ends, with where the point is: on release, or
+     * `changeEndDelay` after the last wheel notch or arrow key.
+     */
+    onChangeEnd?: (value: PointPosition, source: ChangeSource) => void;
+    /**
+     * How long after the last wheel notch or arrow key the change counts as
+     * over, in milliseconds.
+     * @default 500
+     */
+    changeEndDelay?: number;
     children?: Snippet;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/components/PointsEditor/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/PointsEditor/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,aAAa,EACb,aAAa,EACd,MAAM,iBAAiB,CAAA;AAExB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,WAAW,iBAAiB;IAChC,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACpC;;;;OAIG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IAC9C;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACjD;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IACvC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACjD,+CAA+C;IAC/C,GAAG,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC3B,wDAAwD;IACxD,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,iFAAiF;IACjF,KAAK,EAAE,aAAa,CAAA;IACpB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,wDAAwD;IACxD,GAAG,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;IAC5B,yDAAyD;IACzD,GAAG,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;IAC5B,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IAC9C,uDAAuD;IACvD,QAAQ,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACjD,yDAAyD;IACzD,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,EAAE,MAAM,CAAC,CAAC,CAAA;IAC1D,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,EAAE,MAAM,CAAC,CAAC,CAAA;IAC9D;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACzC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/PointsEditor/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EACZ,gBAAgB,EAChB,aAAa,EACb,aAAa,EACd,MAAM,iBAAiB,CAAA;AAExB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,WAAW,iBAAiB;IAChC,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IAC9C;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACjD;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IACvC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACjD,+CAA+C;IAC/C,GAAG,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC3B,wDAAwD;IACxD,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,iFAAiF;IACjF,KAAK,EAAE,aAAa,CAAA;IACpB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,wDAAwD;IACxD,GAAG,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;IAC5B,yDAAyD;IACzD,GAAG,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;IAC5B,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IAC9C,uDAAuD;IACvD,QAAQ,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACjD,yDAAyD;IACzD,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,EAAE,MAAM,CAAC,CAAC,CAAA;IAC1D,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,EAAE,MAAM,CAAC,CAAC,CAAA;IAC9D;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACzC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAA;IACpE;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAA;IAClE;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}

package/dist/components/Slider/Marks.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { cssLength, sliderMarks } from '@tremolo-ui/dom'
+  import { cssLength, sliderMarks } from '@tremolo-ui/dom/internal'
 
   import { setPlacement } from '../_util/placement.js'
 
@@ -21,13 +21,15 @@
     if (!options) return []
     const list = sliderMarks(options, slider.min, slider.max, slider.step)
     // In the order they are on screen.
-    return slider.vertical !== slider.reverse ? list.reverse() : list
+    return (slider.orientation === 'vertical') !== slider.reverse
+      ? list.reverse()
+      : list
   })
 </script>
 
 <!-- Each option inside is placed against this box. -->
 <div
-  data-orientation={slider.vertical ? 'vertical' : 'horizontal'}
+  data-orientation={slider.orientation}
   style="position: relative; {style ?? ''}"
   style:--gap={cssLength(gap)}
   {...rest}

package/dist/components/Slider/Marks.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Marks.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Marks.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAElD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,gBAAgB,GAC3B,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,gBAAgB,CAAC,CAAC;AAuCjE,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Marks.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Marks.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAElD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,gBAAgB,GAC3B,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,gBAAgB,CAAC,CAAC;AAyCjE,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/Slider/MarksOption.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { cssLength, valuePercent } from '@tremolo-ui/dom'
+  import { valuePercent } from '@tremolo-ui/dom'
+  import { cssLength } from '@tremolo-ui/dom/internal'
 
   import { checkPlacement } from '../_util/placement.js'
 
@@ -32,23 +33,23 @@
     valuePercent(
       value,
       { min: slider.min, max: slider.max, scale: slider.scale },
-      slider.vertical !== slider.reverse,
+      (slider.orientation === 'vertical') !== slider.reverse,
     ),
   )
-  const orientation = $derived(slider.vertical ? 'vertical' : 'horizontal')
+  const orientation = $derived(slider.orientation)
 </script>
 
 <div
   data-orientation={orientation}
   {...rest}
-  style="position: absolute; translate: {slider.vertical
+  style="position: absolute; translate: {slider.orientation === 'vertical'
     ? 'var(--translate, 0 -50%)'
     : 'var(--translate, -50% 0)'}; z-index: 10; {style ?? ''}"
   style:--thickness={cssLength(thickness)}
   style:--length={cssLength(length)}
   style:--gap={cssLength(gap)}
-  style:left={slider.vertical ? undefined : `${percent}%`}
-  style:top={slider.vertical ? `${percent}%` : undefined}
+  style:left={slider.orientation === 'vertical' ? undefined : `${percent}%`}
+  style:top={slider.orientation === 'vertical' ? `${percent}%` : undefined}
 >
   {#if mark}
     <div

package/dist/components/Slider/MarksOption.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarksOption.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/MarksOption.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAA;AAExD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,sBAAsB,GACjC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,sBAAsB,CAAC,CAAC;AAoDvE,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MarksOption.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/MarksOption.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAA;AAExD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,sBAAsB,GACjC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,sBAAsB,CAAC,CAAC;AAqDvE,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/Slider/Root.svelte

@@ -1,21 +1,24 @@
 <script lang="ts">
   import {
-    applyDelta,
-    arrowKeyDirection,
     DEFAULT_DRAG_SENSITIVITY,
     DEFAULT_KEYBOARD_OPTIONS,
     DEFAULT_WHEEL_OPTIONS,
     elementMapping,
-    selectModifier,
     valuePercent,
-    wheelDirection,
     type AxisOptions,
     type XY,
   } from '@tremolo-ui/dom'
+  import {
+    applyDelta,
+    arrowKeyDirection,
+    selectModifier,
+    wheelDirection,
+  } from '@tremolo-ui/dom/internal'
   import { linearScale } from '@tremolo-ui/functions'
 
   import { dragValue } from '../../actions/drag-value.js'
   import { wheel as wheelAction } from '../../actions/wheel.js'
+  import { useChangeGesture } from '../_util/change-gesture.svelte.js'
   import { useCheckSteps } from '../_util/check-steps.svelte.js'
 
   import { setSliderContext } from './context.js'
@@ -32,17 +35,18 @@
     max,
     step = 1,
     scale = linearScale,
-    vertical = false,
+    orientation = 'horizontal',
     reverse = false,
-    externalStyles,
+    dragCursor = 'pointer',
     wheel = DEFAULT_WHEEL_OPTIONS,
     keyboard = DEFAULT_KEYBOARD_OPTIONS,
     dragSensitivity = DEFAULT_DRAG_SENSITIVITY,
     disabled = false,
     readonly = false,
     onChange,
-    onDragStart,
-    onDragEnd,
+    onChangeStart,
+    onChangeEnd,
+    changeEndDelay,
     ref = $bindable(null),
     children,
     onkeydown,
@@ -57,6 +61,7 @@
   // vertical -> reversed (up)
   // reverse -> reversed (left)
   // vertical & reverse -> normal (down)
+  const vertical = $derived(orientation === 'vertical')
   const displayReversed = $derived(vertical !== reverse)
   const percent = $derived(
     valuePercent(value, { min, max, scale }, displayReversed),
@@ -81,6 +86,14 @@
     onChange?.(next)
   }
 
+  const gesture = useChangeGesture(() => ({
+    value,
+    inactive,
+    onChangeStart,
+    onChangeEnd,
+    changeEndDelay,
+  }))
+
   setSliderContext({
     get value() {
       return value
@@ -97,8 +110,8 @@
     get scale() {
       return scale
     },
-    get vertical() {
-      return vertical
+    get orientation() {
+      return orientation
     },
     get reverse() {
       return reverse
@@ -129,20 +142,18 @@
       sensitivity: (state) =>
         selectModifier(dragSensitivity, state.event).value,
     }),
-    cursor: inactive ? undefined : (externalStyles?.cursor ?? 'pointer'),
+    cursor: inactive ? undefined : dragCursor,
     shouldStart: () => !inactive,
     updateOnPointerDown: true,
     onChange: (v: XY<number>) => {
       if (!inactive) change(valueOf(v))
     },
-    onDragStart: (v: XY<number>) => {
+    onDragStart: () => {
       if (inactive) return
+      gesture.hold('pointer')
       thumb?.focus()
-      onDragStart?.(valueOf(v))
-    },
-    onDragEnd: (v: XY<number>) => {
-      if (!inactive) onDragEnd?.(valueOf(v))
     },
+    onDragEnd: () => gesture.end(),
   })
 
   const wheelOptions = $derived({
@@ -154,6 +165,7 @@
       const direction = wheelDirection(event, { horizontal: !vertical })
       if (direction === null) return
       event.preventDefault()
+      gesture.pulse('wheel')
       change(
         applyDelta(value, reverse ? -direction : direction, wheel, axis, event),
       )
@@ -180,7 +192,7 @@
   bind:this={ref}
   role="group"
   tabindex="-1"
-  data-orientation={vertical ? 'vertical' : 'horizontal'}
+  data-orientation={orientation}
   data-disabled={disabled ? '' : undefined}
   data-readonly={readonly ? '' : undefined}
   use:dragValue={dragOptions}
@@ -190,6 +202,7 @@
     if (direction !== null) {
       event.preventDefault()
       if (keyboard && !inactive) {
+        gesture.pulse('keyboard')
         change(
           applyDelta(
             value,

package/dist/components/Slider/Root.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Root.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Root.svelte.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,WAAW,GACtB,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,WAAW,CAAC,CAAC;AA8L5D,QAAA,MAAM,IAAI;;;mBAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Root.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Root.svelte.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,WAAW,GACtB,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,WAAW,CAAC,CAAC;AA0M5D,QAAA,MAAM,IAAI;;;mBAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/Slider/Thumb.svelte

@@ -55,8 +55,8 @@
   style="position: absolute; translate: var(--translate, -50% -50%); z-index: 100; {style ??
     ''}"
   style:--color={color}
-  style:top={slider.vertical ? `${slider.percent}%` : '50%'}
-  style:left={slider.vertical ? '50%' : `${slider.percent}%`}
+  style:top={slider.orientation === 'vertical' ? `${slider.percent}%` : '50%'}
+  style:left={slider.orientation === 'vertical' ? '50%' : `${slider.percent}%`}
 >
   <VisuallyHiddenRangeInput
     bind:ref={input}
@@ -66,7 +66,7 @@
     step={slider.step}
     disabled={slider.disabled}
     aria-readonly={slider.readonly}
-    aria-orientation={slider.vertical ? 'vertical' : 'horizontal'}
+    aria-orientation={slider.orientation}
     aria-label={ariaLabel}
     aria-labelledby={ariaLabelledby}
     aria-describedby={ariaDescribedby}