@tremolo-ui/svelte 0.8.0 → 0.9.0

package/dist/actions/drag-value.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drag-value.d.ts","sourceRoot":"","sources":["../../src/actions/drag-value.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,iBAAiB,CAAA;AAExB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,gBAAgB,CAUvD,CAAA"}
+{"version":3,"file":"drag-value.d.ts","sourceRoot":"","sources":["../../src/actions/drag-value.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAGxE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,gBAAgB,CAUvD,CAAA"}

package/dist/actions/drag-value.js

@@ -1,4 +1,5 @@
-import { createDragValue, replaceOptions, } from '@tremolo-ui/dom';
+import { createDragValue } from '@tremolo-ui/dom';
+import { replaceOptions } from '@tremolo-ui/dom/internal';
 /**
  * Drive a value with a pointer drag. See `createDragValue` in
  * `@tremolo-ui/dom` for the options; `elementMapping` and `relativeMapping`

package/dist/actions/drag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drag.d.ts","sourceRoot":"","sources":["../../src/actions/drag.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE9E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C;;;;;;;;;GASG;AACH,eAAO,MAAM,IAAI,EAAE,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,SAAS,CAazD,CAAA"}
+{"version":3,"file":"drag.d.ts","sourceRoot":"","sources":["../../src/actions/drag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAG9D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C;;;;;;;;;GASG;AACH,eAAO,MAAM,IAAI,EAAE,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,SAAS,CAazD,CAAA"}

package/dist/actions/drag.js

@@ -1,4 +1,5 @@
-import { createDrag, replaceOptions } from '@tremolo-ui/dom';
+import { createDrag } from '@tremolo-ui/dom';
+import { replaceOptions } from '@tremolo-ui/dom/internal';
 /**
  * Track a pointer drag on the element. See `createDrag` in `@tremolo-ui/dom`
  * for the options.

package/dist/actions/drop-zone.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drop-zone.d.ts","sourceRoot":"","sources":["../../src/actions/drop-zone.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,iBAAiB,CAAA;AAExB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,OAAO,EAAE,eAAe,GAAG,SAAS,CAajE,CAAA"}
+{"version":3,"file":"drop-zone.d.ts","sourceRoot":"","sources":["../../src/actions/drop-zone.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGtE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,OAAO,EAAE,eAAe,GAAG,SAAS,CAajE,CAAA"}

package/dist/actions/drop-zone.js

@@ -1,4 +1,5 @@
-import { createDropZone, replaceOptions, } from '@tremolo-ui/dom';
+import { createDropZone } from '@tremolo-ui/dom';
+import { replaceOptions } from '@tremolo-ui/dom/internal';
 /**
  * Take files dropped on the element. See `createDropZone` in
  * `@tremolo-ui/dom` for the options; `onStateChange` reports whether files

package/dist/actions/long-press.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"long-press.d.ts","sourceRoot":"","sources":["../../src/actions/long-press.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,iBAAiB,CAAA;AAExB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,gBAAgB,CAkB3D,CAAA"}
+{"version":3,"file":"long-press.d.ts","sourceRoot":"","sources":["../../src/actions/long-press.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAGxE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,gBAAgB,CAkB3D,CAAA"}

package/dist/actions/long-press.js

@@ -1,4 +1,5 @@
-import { createLongPress, replaceOptions, } from '@tremolo-ui/dom';
+import { createLongPress } from '@tremolo-ui/dom';
+import { replaceOptions } from '@tremolo-ui/dom/internal';
 /**
  * Repeat `onPress` while the element is held down: once on the press, then
  * every `interval` after `delay`. See `createLongPress` in `@tremolo-ui/dom`.

package/dist/actions/wheel.d.ts

@@ -1,8 +1,5 @@
 import { type WheelOptions } from '@tremolo-ui/dom';
 import type { Action } from 'svelte/action';
-export interface WheelActionOptions extends WheelOptions {
-    onWheel: (event: WheelEvent) => void;
-}
 /**
  * Listen to the wheel on the element, as a non-passive listener so that
  * `preventDefault()` can keep the page from scrolling. See `createWheel` in
@@ -11,5 +8,5 @@ export interface WheelActionOptions extends WheelOptions {
  * @example
  * <div use:wheel={{ onWheel: (e) => { e.preventDefault(); … }, requireFocus: true }}></div>
  */
-export declare const wheel: Action<Element, WheelActionOptions>;
+export declare const wheel: Action<Element, WheelOptions>;
 //# sourceMappingURL=wheel.d.ts.map

package/dist/actions/wheel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wheel.d.ts","sourceRoot":"","sources":["../../src/actions/wheel.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAEhF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;CACrC;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,kBAAkB,CAWrD,CAAA"}
+{"version":3,"file":"wheel.d.ts","sourceRoot":"","sources":["../../src/actions/wheel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAGhE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,YAAY,CAU/C,CAAA"}

package/dist/actions/wheel.js

@@ -1,15 +1,5 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { createWheel, replaceOptions } from '@tremolo-ui/dom';
+import { createWheel } from '@tremolo-ui/dom';
+import { replaceOptions } from '@tremolo-ui/dom/internal';
 /**
  * Listen to the wheel on the element, as a non-passive listener so that
  * `preventDefault()` can keep the page from scrolling. See `createWheel` in
@@ -19,8 +9,7 @@ import { createWheel, replaceOptions } from '@tremolo-ui/dom';
  * <div use:wheel={{ onWheel: (e) => { e.preventDefault(); … }, requireFocus: true }}></div>
  */
 export const wheel = (node, options) => {
-    const { onWheel } = options, rest = __rest(options, ["onWheel"]);
-    const instance = createWheel(node, onWheel, rest);
+    const instance = createWheel(node, options);
     let current = options;
     return {
         update: (next) => {

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

@@ -1,16 +1,9 @@
-import type { AnimationFrame } from '@tremolo-ui/dom';
-/** Called once the canvas is ready, and again whenever it is resized. */
-export type InitFunction = (context: CanvasRenderingContext2D, size: {
-    width: number;
-    height: number;
-}) => void;
-/** Called on every frame while `animate` is on, and once otherwise. */
-export type DrawFunction = (context: CanvasRenderingContext2D, frame: AnimationFrame) => void;
+import type { CanvasDrawFunction, CanvasInitFunction } from '@tremolo-ui/dom';
 export interface AnimationCanvasProps {
     /** Draws a frame. */
-    draw: DrawFunction;
-    /** Sets the canvas up before the first frame and after a resize. */
-    init?: InitFunction;
+    draw: CanvasDrawFunction;
+    /** Sets the canvas up, once, before the first frame. */
+    init?: CanvasInitFunction;
     /**
      * Draw on every animation frame. Off, `draw` runs once and again after a
      * resize.

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/AnimationCanvas/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,yEAAyE;AACzE,MAAM,MAAM,YAAY,GAAG,CACzB,OAAO,EAAE,wBAAwB,EACjC,IAAI,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,KACpC,IAAI,CAAA;AAET,uEAAuE;AACvE,MAAM,MAAM,YAAY,GAAG,CACzB,OAAO,EAAE,wBAAwB,EACjC,KAAK,EAAE,cAAc,KAClB,IAAI,CAAA;AAET,MAAM,WAAW,oBAAoB;IACnC,qBAAqB;IACrB,IAAI,EAAE,YAAY,CAAA;IAClB,oEAAoE;IACpE,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,gCAAgC,CAAA;IAC1C;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yCAAyC;IACzC,GAAG,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAA;CAC/B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/AnimationCanvas/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAE7E,MAAM,WAAW,oBAAoB;IACnC,qBAAqB;IACrB,IAAI,EAAE,kBAAkB,CAAA;IACxB,wDAAwD;IACxD,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,gCAAgC,CAAA;IAC1C;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yCAAyC;IACzC,GAAG,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAA;CAC/B"}

package/dist/components/FileInput/Root.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { partitionByAccept } from '@tremolo-ui/dom'
+  import { partitionByAccept } from '@tremolo-ui/dom/internal'
 
   import { visuallyHidden } from '../_util/style.js'
 

package/dist/components/Knob/Root.svelte

@@ -1,22 +1,25 @@
 <script lang="ts">
   import {
-    applyDelta,
-    arrowKeyDirection,
-    cssLength,
     DEFAULT_DRAG_SENSITIVITY,
     DEFAULT_KEYBOARD_OPTIONS,
     DEFAULT_WHEEL_OPTIONS,
     knobAngles,
     relativeMapping,
-    selectModifier,
-    wheelDirection,
     type AxisOptions,
     type XY,
   } from '@tremolo-ui/dom'
+  import {
+    applyDelta,
+    arrowKeyDirection,
+    cssLength,
+    selectModifier,
+    wheelDirection,
+  } from '@tremolo-ui/dom/internal'
   import { linearScale, type ValueRange } 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 { setKnobContext } from './context.js'
@@ -32,19 +35,21 @@
     max,
     step = 1,
     scale = linearScale,
-    defaultValue,
+    resetValue,
     startValue,
     size,
-    externalStyles,
+    dragCursor = 'grabbing',
     wheel = DEFAULT_WHEEL_OPTIONS,
     keyboard = DEFAULT_KEYBOARD_OPTIONS,
     dragSensitivity = DEFAULT_DRAG_SENSITIVITY,
     pointerLock = false,
-    enableDoubleClickDefault = true,
     disabled = false,
     readonly = false,
     angleRange = 270,
     onChange,
+    onChangeStart,
+    onChangeEnd,
+    changeEndDelay,
     ref = $bindable(null),
     children,
     style,
@@ -101,6 +106,14 @@
     onChange?.(next)
   }
 
+  const gesture = useChangeGesture(() => ({
+    value,
+    inactive,
+    onChangeStart,
+    onChangeEnd,
+    changeEndDelay,
+  }))
+
   // The knob has no travel of its own: the value moves away from where it
   // stood when the drag started, 100px of movement spanning the whole range.
   // Only the vertical axis carries a value, reversed so that dragging up
@@ -115,7 +128,7 @@
     }),
     getValue: (): XY<number> => [value, value],
     threshold: 1,
-    cursor: inactive ? undefined : (externalStyles?.cursor ?? 'grabbing'),
+    cursor: inactive ? undefined : dragCursor,
     pointerLock: inactive ? false : pointerLock,
     shouldStart: () => !inactive,
     onChange: (v: XY<number>) => {
@@ -123,9 +136,11 @@
     },
     onDragStart: () => {
       dragging = true
+      if (!inactive) gesture.hold('pointer')
     },
     onDragEnd: () => {
       dragging = false
+      gesture.end()
     },
   })
 
@@ -138,6 +153,7 @@
       const direction = wheelDirection(event)
       if (direction === null) return
       event.preventDefault()
+      gesture.pulse('wheel')
       change(applyDelta(value, direction, wheel, range, event))
     },
   })
@@ -174,13 +190,18 @@
       const direction = arrowKeyDirection(event.key)
       if (direction !== null) {
         event.preventDefault()
+        gesture.pulse('keyboard')
         change(applyDelta(value, direction, keyboard, range, event))
       }
     }
     onkeydown?.(event)
   }}
   ondblclick={(event) => {
-    if (!inactive && enableDoubleClickDefault) change(defaultValue ?? min)
+    if (!inactive && resetValue !== null) {
+      gesture.instant('doubleClick', () =>
+        change(resetValue ?? startValue ?? min),
+      )
+    }
     ondblclick?.(event)
   }}
   {...rest}

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

@@ -1 +1 @@
-{"version":3,"file":"Root.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Knob/Root.svelte.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,SAAS,CAAC,CAAC;AAgKjF,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/Knob/Root.svelte.ts"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,SAAS,CAAC,CAAC;AAoLjF,QAAA,MAAM,IAAI;;;mBAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/Knob/Thumb.svelte

@@ -13,11 +13,11 @@
     Omit<SVGAttributes<SVGSVGElement>, keyof KnobThumbProps>
 
   let {
-    thumb = 'currentColor',
-    thumbLine = 'currentColor',
-    thumbSize = 84,
-    thumbLineWeight = 6,
-    thumbLineLength = 35,
+    color = 'currentColor',
+    lineColor = 'currentColor',
+    size = 84,
+    lineWeight = 6,
+    lineLength = 35,
     classes,
     ...rest
   }: Props = $props()
@@ -28,15 +28,15 @@
 </script>
 
 <svg {...rest}>
-  <circle cx="50%" cy="50%" r="{thumbSize / 2}%" fill={thumb} />
+  <circle cx="50%" cy="50%" r="{size / 2}%" fill={color} />
   <line
-    class={classes?.thumbLine}
+    class={classes?.line}
     x1="50%"
-    y1="{(KNOB_VIEWBOX_SIZE - clamp(thumbSize, 0, 100)) / 2}%"
+    y1="{(KNOB_VIEWBOX_SIZE - clamp(size, 0, 100)) / 2}%"
     x2="50%"
-    y2="{thumbLineLength}%"
-    stroke={thumbLine}
-    stroke-width="{thumbLineWeight}%"
+    y2="{lineLength}%"
+    stroke={lineColor}
+    stroke-width="{lineWeight}%"
     style:transform="rotate({angle}deg)"
     style:transform-origin="50% 50%"
   />

package/dist/components/Knob/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 KnobProps {
@@ -25,10 +25,10 @@ export interface KnobProps {
      */
     scale?: Scale;
     /**
-     * The value a double click restores, while `enableDoubleClickDefault` is on.
-     * @default min
+     * The value a double click restores. `null` turns the double click off.
+     * @default startValue
      */
-    defaultValue?: number;
+    resetValue?: number | null;
     /**
      * Where the active arc starts. Put it at the centre of a bipolar control,
      * such as a pan knob, so that the arc grows from there either way.
@@ -42,11 +42,9 @@ export interface KnobProps {
     size?: number | string;
     /**
      * The cursor to show while dragging.
-     * @default { cursor: 'grabbing' }
+     * @default 'grabbing'
      */
-    externalStyles?: {
-        cursor?: string;
-    };
+    dragCursor?: string;
     /**
      * How much one notch of the wheel moves the value, while the focus is
      * inside. `null` turns the wheel off.
@@ -71,11 +69,6 @@ export interface KnobProps {
      * @default { default: ['raw', 1], shift: ['raw', 0.1] }
      */
     keyboard?: ModifierValue<InputEventOption> | null;
-    /**
-     * Restore `defaultValue` on a double click.
-     * @default true
-     */
-    enableDoubleClickDefault?: boolean;
     /**
      * Make the knob unchangeable and remove it from the tab order.
      * The parts carry `data-disabled` while it is set.
@@ -97,6 +90,24 @@ export interface KnobProps {
      * double click moves it.
      */
     onChange?: (value: number) => void;
+    /**
+     * Called when a change of the value starts — a drag, a double
+     * click, the first wheel notch or arrow key — with the value before it and
+     * what it is made with. A host recording automation can treat the control
+     * as touched from here until `onChangeEnd`.
+     */
+    onChangeStart?: (value: number, source: ChangeSource) => void;
+    /**
+     * Called when the change ends, with the value it ended on: on release, or
+     * `changeEndDelay` after the last wheel notch or arrow key.
+     */
+    onChangeEnd?: (value: number, source: ChangeSource) => void;
+    /**
+     * How long after the last wheel notch or arrow key the change counts as
+     * over, in milliseconds.
+     * @default 500
+     */
+    changeEndDelay?: number;
     /** The root element, bound with `bind:ref`. */
     ref?: HTMLDivElement | null;
     /**
@@ -110,30 +121,30 @@ export interface KnobThumbProps {
      * Fill colour of the circle.
      * @default 'currentColor'
      */
-    thumb?: string;
+    color?: string;
     /**
      * Colour of the line that points at the value.
      * @default 'currentColor'
      */
-    thumbLine?: string;
+    lineColor?: string;
     /**
      * Diameter of the circle, as a percentage of the knob.
      * @default 84
      */
-    thumbSize?: number;
+    size?: number;
     /**
      * Thickness of the line, as a percentage of the knob.
      * @default 6
      */
-    thumbLineWeight?: number;
+    lineWeight?: number;
     /**
      * How far down the line reaches, as a percentage of the knob from its top.
      * @default 35
      */
-    thumbLineLength?: number;
+    lineLength?: number;
     /** Classes for the line that points at the value. */
     classes?: {
-        thumbLine?: string;
+        line?: string;
     };
 }
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Knob/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,SAAS;IACxB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,GAAG,EAAE,MAAM,CAAA;IACX,qDAAqD;IACrD,GAAG,EAAE,MAAM,CAAA;IACX;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB;;;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;;;;OAIG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IACvC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACjD;;;OAGG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;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;;;OAGG;IACH,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,qDAAqD;IACrD,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CACjC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Knob/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,SAAS;IACxB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,GAAG,EAAE,MAAM,CAAA;IACX,qDAAqD;IACrD,GAAG,EAAE,MAAM,CAAA;IACX;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IAC9C;;;;OAIG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IACvC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACjD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;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;;;OAGG;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;;;OAGG;IACH,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAC5B"}

package/dist/components/NumberInput/InputField.svelte

@@ -3,10 +3,10 @@
     caretAtDecimalOffset,
     caretDecimalOffset,
     numberSpan,
-  } from '@tremolo-ui/dom'
+  } from '@tremolo-ui/dom/internal'
   import { tick } from 'svelte'
 
-  import { useNumberInputContext } from './context.js'
+  import { useNumberInputContext, useNumberInputGesture } from './context.js'
 
   import type { HTMLInputAttributes } from 'svelte/elements'
 
@@ -25,6 +25,7 @@
   }: Props = $props()
 
   const field = useNumberInputContext()
+  const gesture = useNumberInputGesture()
 
   $effect(() => {
     field.setInput(ref)
@@ -62,6 +63,7 @@
       field.keepCaretOnStep && input.selectionStart !== null
         ? caretDecimalOffset(from, input.selectionStart)
         : null
+    gesture?.key()
     field.nudge(direction, field.keyboard!, event)
     if (offset === null) return
     await tick()

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

@@ -1 +1 @@
-{"version":3,"file":"InputField.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/InputField.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAIzD,KAAK,KAAK,GAAG,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IACzD,GAAG,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;CAC9B,CAAC;AAuGJ,QAAA,MAAM,UAAU,8CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"InputField.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/InputField.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAIzD,KAAK,KAAK,GAAG,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IACzD,GAAG,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;CAC9B,CAAC;AAyGJ,QAAA,MAAM,UAAU,8CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/NumberInput/Root.svelte

@@ -1,21 +1,24 @@
 <script lang="ts">
   import {
-    commitNumberInputText,
     DEFAULT_DRAG_SENSITIVITY,
     DEFAULT_KEYBOARD_OPTIONS,
     DEFAULT_WHEEL_OPTIONS,
+  } from '@tremolo-ui/dom'
+  import {
+    commitNumberInputText,
     numberInputBounds,
     numberInputRanges,
     nudgeNumberInput,
     parseNumberText,
     wheelDirection,
-  } from '@tremolo-ui/dom'
+  } from '@tremolo-ui/dom/internal'
   import { linearScale } from '@tremolo-ui/functions'
 
   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 { setNumberInputContext } from './context.js'
+  import { setNumberInputContext, setNumberInputGesture } from './context.js'
   import type { NumberInputProps } from './types.js'
 
   import type { HTMLAttributes } from 'svelte/elements'
@@ -37,6 +40,7 @@
     drag = 1,
     dragSensitivity = DEFAULT_DRAG_SENSITIVITY,
     pointerLock = false,
+    dragCursor = 'ns-resize',
     selectOnFocus = 'none',
     unformatOnFocus = false,
     keepCaretOnStep = false,
@@ -44,6 +48,9 @@
     disabled = false,
     readonly = false,
     onChange,
+    onChangeStart,
+    onChangeEnd,
+    changeEndDelay,
     ref = $bindable(null),
     children,
     ...rest
@@ -75,6 +82,14 @@
     format,
   }))
 
+  const gesture = useChangeGesture(() => ({
+    value,
+    inactive,
+    onChangeStart,
+    onChangeEnd,
+    changeEndDelay,
+  }))
+
   function changeValue(next: number) {
     if (inactive) return
     draft = null
@@ -114,6 +129,9 @@
     get pointerLock() {
       return pointerLock
     },
+    get dragCursor() {
+      return dragCursor
+    },
     get selectOnFocus() {
       return selectOnFocus
     },
@@ -151,6 +169,7 @@
       // to type into an input whose max is 100.
       const parsed = parse(next)
       if (Number.isFinite(parsed)) {
+        if (parsed !== value) gesture.pulse('keyboard')
         value = parsed
         onChange?.(parsed)
       }
@@ -164,8 +183,14 @@
       })
       // Text with no number is not a value: the field goes back to what it
       // was showing.
-      if (committed === null) draft = null
-      else changeValue(committed)
+      if (committed === null) {
+        draft = null
+        return
+      }
+      // The typing was a gesture of its own, and committing is where it ends.
+      if (committed !== value) gesture.pulse('keyboard')
+      changeValue(committed)
+      gesture.end()
     },
     changeValue,
     nudge: (direction, option, modifiers) =>
@@ -177,12 +202,37 @@
     },
   })
 
+  let pressed = false
+  setNumberInputGesture({
+    press: () => {
+      if (inactive) return
+      gesture.hold('pointer')
+      // Called again by every repeat of a held stepper; one release will do.
+      if (pressed) return
+      pressed = true
+      // Released wherever the pointer ends up: the stepper drag captures it,
+      // and a press that wanders off the button still ends.
+      const release = () => {
+        pressed = false
+        gesture.end()
+        window.removeEventListener('pointerup', release)
+        window.removeEventListener('pointercancel', release)
+      }
+      window.addEventListener('pointerup', release)
+      window.addEventListener('pointercancel', release)
+    },
+    key: () => {
+      if (!inactive) gesture.pulse('keyboard')
+    },
+  })
+
   const wheelOptions = $derived({
     requireFocus: true,
     onWheel: (event: WheelEvent) => {
       const direction = wheelDirection(event)
       if (!wheel || inactive || direction === null) return
       event.preventDefault()
+      gesture.pulse('wheel')
       changeValue(nudgeNumberInput(value, direction, wheel, ranges, event))
     },
   })

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

@@ -1 +1 @@
-{"version":3,"file":"Root.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/Root.svelte.ts"],"names":[],"mappings":"AAoBA,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;AAmMjE,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/NumberInput/Root.svelte.ts"],"names":[],"mappings":"AAuBA,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;AAoPjE,QAAA,MAAM,IAAI;;;mBAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/NumberInput/Stepper.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
-  import { createStepperDrag, type StepperDragInstance } from '@tremolo-ui/dom'
+  import {
+    createStepperDrag,
+    type StepperDragInstance,
+  } from '@tremolo-ui/dom/internal'
   import { untrack } from 'svelte'
 
-  import { setStepperContext, useNumberInputContext } from './context.js'
+  import {
+    setStepperContext,
+    useNumberInputContext,
+    useNumberInputGesture,
+  } from './context.js'
 
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
@@ -12,9 +19,15 @@
     children?: Snippet
   }
 
-  let { ref = $bindable(null), children, ...rest }: Props = $props()
+  let {
+    ref = $bindable(null),
+    children,
+    onpointerdown,
+    ...rest
+  }: Props = $props()
 
   const field = useNumberInputContext()
+  const gesture = useNumberInputGesture()
 
   // Only attached while it can do something: `createDrag` puts
   // `touch-action: none` on the element, and a stepper that cannot be dragged
@@ -27,6 +40,7 @@
     pixels: field.drag ?? 1,
     sensitivity: field.dragSensitivity,
     pointerLock: field.pointerLock,
+    cursor: field.dragCursor,
   })
 
   let instance: StepperDragInstance | null = null
@@ -56,6 +70,15 @@
 
 <!-- The area the steppers sit in, and a drag handle in its own right:
   dragging it up and down moves the value one `step` every `drag` pixels. -->
-<div bind:this={ref} {...rest}>
+<div
+  bind:this={ref}
+  onpointerdown={(event) => {
+    // A drag on the stepper is a press like any other: held from here until
+    // the pointer is released.
+    if (enabled) gesture?.press()
+    onpointerdown?.(event)
+  }}
+  {...rest}
+>
   {@render children?.()}
 </div>