svelte-tweakpane-ui 1.1.3 → 1.2.0

package/dist/control/Button.svelte.d.ts

@@ -18,8 +18,9 @@ declare const __propDef: {
 		/**
 		 * Custom color scheme.
 		 * @default `undefined`  \
-		 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
-		 * set with `setGlobalDefaultTheme()`.)
+		 * Inherits default Tweakpane theme equivalent to
+		 * `ThemeUtils.presets.standard`, or the theme set with
+		 * `setGlobalDefaultTheme()`.)
 		 * */ theme?: Theme | undefined;
 	};
 	slots: {};

package/dist/control/ButtonGrid.svelte.d.ts

@@ -34,18 +34,24 @@ declare const __propDef: {
 			 * Reference to internal Tweakpane
 			 * [`BladeApi`](https://tweakpane.github.io/docs/api/classes/BladeApi.html) for this blade.
 			 *
-			 * This is primarily for internal use, when implementing convenience components wrapping Blade's
-			 * functionality.
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Blade>`'s functionality.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+			 *
 			 * @bindable
 			 * @readonly
 			 */
 			ref?: ButtonGridRef | undefined;
 			/**
-			 * Imported Tweakpane `TpPluginBundle` (Aliased as `Plugin`) module to register before creating
-			 * the blade.
+			 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
+			 * the `<Blade>`'s containing `<Pane>`.
+			 *
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Blade>`'s functionality in combination with a Tweakpane plugin.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
 			 *
-			 * This is primarily for internal use, when implementing convenience components wrapping Blade's
-			 * functionality in combination with a Tweakpane plugin.
 			 * @default `undefined`
 			 */
 			plugin?: import('tweakpane').TpPluginBundle | undefined;
@@ -128,8 +134,11 @@ export type ButtonGridSlots = typeof __propDef.slots;
  * } from 'svelte-tweakpane-ui';
  *
  * const keyboard = [
- *   ...Array.from({ length: 26 }, (_, index) =>
- *     String.fromCodePoint(65 + index)
+ *   ...Array.from(
+ *     {
+ *       length: 26
+ *     },
+ *     (_, index) => String.fromCodePoint(65 + index)
  *   ),
  *   ',',
  *   '.',
@@ -153,7 +162,9 @@ export type ButtonGridSlots = typeof __propDef.slots;
  * </Pane>
  *
  * <div class="demo">
- * <p>{textBuffer}</p>
+ * <p>
+ *   {textBuffer}
+ * </p>
  * </div>
  *
  * <style>

package/dist/control/Checkbox.svelte

@@ -1,6 +1,8 @@
+<script context="module"></script>
+
 <script>
 	import GenericInput from '../internal/GenericInput.svelte';
 	export let value;
 </script>
 
-<GenericInput bind:value {...$$restProps} />
+<GenericInput bind:value on:change {...$$restProps} />

package/dist/control/Checkbox.svelte.d.ts

@@ -1,4 +1,6 @@
 import { SvelteComponent } from 'svelte';
+import type { ValueChangeEvent } from '../utils.js';
+export type CheckboxChangeEvent = ValueChangeEvent<boolean>;
 declare const __propDef: {
 	props: Omit<
 		Omit<
@@ -46,18 +48,24 @@ declare const __propDef: {
 				 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
 				 * this control.
 				 *
-				 * This is primarily for internal use, when implementing convenience components wrapping
-				 * Binding's functionality.
+				 * This property is exposed for advanced use cases only, such as when implementing convenience
+				 * components wrapping `<Binding>`'s functionality.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+				 *
 				 * @bindable
 				 * @readonly
 				 */
 				ref?: import('../internal/GenericInput.svelte').GenericInputRef | undefined;
 				/**
 				 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-				 * the binding's containing `<Pane>`.
+				 * the `<Binding>`'s containing `<Pane>`.
+				 *
+				 * This property is exposed for advanced use cases only, such as when implementing convenience
+				 * components wrapping `<Binding>`'s functionality in combination with a Tweakpane plugin.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
 				 *
-				 * This is primarily for internal use, when implementing convenience components wrapping
-				 * Binding's functionality in combination with a Tweakpane plugin.
 				 * @default `undefined`
 				 */
 				plugin?: import('tweakpane').TpPluginBundle | undefined;
@@ -72,10 +80,21 @@ declare const __propDef: {
 		},
 		'ref' | 'options' | 'plugin'
 	>;
+	slots: {};
 	events: {
-		[evt: string]: CustomEvent<any>;
+		/**
+		 * Fires when `value` changes.
+		 *
+		 * _This event is provided for advanced use cases. It's usually preferred to bind to the `value` prop instead._
+		 *
+		 * The `event.details` payload includes a copy of the value and an `origin` field to distinguish between user-interactive changes (`internal`)
+		 * and changes resulting from programmatic manipulation of the `value` (`external`).
+		 *
+		 * @extends ValueChangeEvent
+		 * @event
+		 * */
+		change: CheckboxChangeEvent;
 	};
-	slots: {};
 };
 export type CheckboxProps = typeof __propDef.props;
 export type CheckboxEvents = typeof __propDef.events;
@@ -85,6 +104,8 @@ export type CheckboxSlots = typeof __propDef.slots;
  *
  * Wraps Tweakpane's [boolean input binding](https://tweakpane.github.io/docs/input-bindings/#boolean).
  *
+ * @emits {CheckboxChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
+ *
  * Usage outside of a `<Pane>` component will implicitly wrap the checkbox in `<Pane
  * position='inline'>`.
  *

package/dist/control/Color.svelte

@@ -64,6 +64,7 @@
 	bind:value={internalValue}
 	bind:expanded
 	bind:ref
+	on:change
 	{buttonClass}
 	{options}
 	{...$$restProps}

package/dist/control/Color.svelte.d.ts

@@ -4,6 +4,7 @@ import type {
 	RgbaColorObject
 } from '@tweakpane/core/dist/input-binding/color/model/color.js';
 import type { Simplify } from '../utils';
+import type { ValueChangeEvent } from '../utils.js';
 export type ColorValueRgbTuple = [r: number, g: number, b: number];
 export type ColorValueRgbaTuple = [r: number, g: number, b: number, a: number];
 export type ColorValueRgbObject = Simplify<RgbColorObject>;
@@ -16,6 +17,7 @@ export type ColorValue = Simplify<
 	| ColorValueRgbaTuple
 	| ColorValueString
 >;
+export type ColorChangeEvent = ValueChangeEvent<ColorValue>;
 import type { ColorInputParams as ColorOptions } from 'tweakpane';
 declare const __propDef: {
 	props: Omit<
@@ -64,18 +66,24 @@ declare const __propDef: {
 				 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
 				 * this control.
 				 *
-				 * This is primarily for internal use, when implementing convenience components wrapping
-				 * Binding's functionality.
+				 * This property is exposed for advanced use cases only, such as when implementing convenience
+				 * components wrapping `<Binding>`'s functionality.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+				 *
 				 * @bindable
 				 * @readonly
 				 */
 				ref?: import('../internal/GenericInput.svelte').GenericInputRef | undefined;
 				/**
 				 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-				 * the binding's containing `<Pane>`.
+				 * the `<Binding>`'s containing `<Pane>`.
+				 *
+				 * This property is exposed for advanced use cases only, such as when implementing convenience
+				 * components wrapping `<Binding>`'s functionality in combination with a Tweakpane plugin.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
 				 *
-				 * This is primarily for internal use, when implementing convenience components wrapping
-				 * Binding's functionality in combination with a Tweakpane plugin.
 				 * @default `undefined`
 				 */
 				plugin?: import('tweakpane').TpPluginBundle | undefined;
@@ -129,10 +137,21 @@ declare const __propDef: {
 		 * */
 		type?: 'float' | 'int' | undefined;
 	};
+	slots: {};
 	events: {
-		[evt: string]: CustomEvent<any>;
+		/**
+		 * Fires when `value` changes.
+		 *
+		 * _This event is provided for advanced use cases. It's usually preferred to bind to the `value` prop instead._
+		 *
+		 * The `event.details` payload includes a copy of the value and an `origin` field to distinguish between user-interactive changes (`internal`)
+		 * and changes resulting from programmatic manipulation of the `value` (`external`).
+		 *
+		 * @extends ValueChangeEvent
+		 * @event
+		 * */
+		change: ColorChangeEvent;
 	};
-	slots: {};
 };
 export type ColorProps = typeof __propDef.props;
 export type ColorEvents = typeof __propDef.events;
@@ -142,6 +161,8 @@ export type ColorSlots = typeof __propDef.slots;
  *
  * Wraps Tweakpane's [color input binding](https://tweakpane.github.io/docs/input-bindings/#color).
  *
+ * @emits {ColorChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
+ *
  * Usage outside of a `<Pane>` component will implicitly wrap the color picker in `<Pane
  * position='inline'>`.
  *

package/dist/control/CubicBezier.svelte

@@ -7,9 +7,13 @@
 	import GenericBladeFolding from '../internal/GenericBladeFolding.svelte';
 	import { fillWith } from '../utils';
 	import { BROWSER } from 'esm-env';
+	import copy from 'fast-copy';
+	import { shallowEqual } from 'fast-equals';
+	import { createEventDispatcher } from 'svelte';
 	export let value;
 	export let label = void 0;
 	export let expanded = void 0;
+	const dispatch = createEventDispatcher();
 	let options;
 	let cubicBezierBlade;
 	const buttonClass = 'tp-cbzv_b';
@@ -17,20 +21,41 @@
 		return Array.isArray(value) ? value : [value.x1, value.y1, value.x2, value.y2];
 	}
 	function setValue() {
-		cubicBezierBlade.value = Array.isArray(value)
-			? new CubicBezier(value[0], value[1], value[2], value[3])
-			: new CubicBezier(value.x1, value.y1, value.x2, value.y2);
+		if (
+			!shallowEqual(getValue(), [
+				cubicBezierBlade.value.x1,
+				cubicBezierBlade.value.y1,
+				cubicBezierBlade.value.x2,
+				cubicBezierBlade.value.y2
+			])
+		) {
+			cubicBezierBlade.value = Array.isArray(value)
+				? new CubicBezier(value[0], value[1], value[2], value[3])
+				: new CubicBezier(value.x1, value.y1, value.x2, value.y2);
+			dispatch('change', {
+				value: copy(value),
+				origin: 'external'
+			});
+		}
 	}
 	function addEvent() {
 		cubicBezierBlade.on('change', (event) => {
-			value = Array.isArray(value)
-				? [event.value.x1, event.value.y1, event.value.x2, event.value.y2]
-				: {
-						x1: event.value.x1,
-						y1: event.value.y1,
-						x2: event.value.x2,
-						y2: event.value.y2
-					};
+			if (
+				!shallowEqual(getValue(), [event.value.x1, event.value.y1, event.value.x2, event.value.y2])
+			) {
+				value = Array.isArray(value)
+					? [event.value.x1, event.value.y1, event.value.x2, event.value.y2]
+					: {
+							x1: event.value.x1,
+							y1: event.value.y1,
+							x2: event.value.x2,
+							y2: event.value.y2
+						};
+				dispatch('change', {
+					value: copy(value),
+					origin: 'internal'
+				});
+			}
 		});
 	}
 	$: options = {

package/dist/control/CubicBezier.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponent } from 'svelte';
 import type { Simplify } from '../utils';
+import type { ValueChangeEvent } from '../utils.js';
 export type CubicBezierValueObject = {
 	x1: number;
 	y1: number;
@@ -8,6 +9,7 @@ export type CubicBezierValueObject = {
 };
 export type CubicBezierValueTuple = [x1: number, y1: number, x2: number, y2: number];
 export type CubicBezierValue = Simplify<CubicBezierValueObject | CubicBezierValueTuple>;
+export type CubicBezierChangeEvent = ValueChangeEvent<CubicBezierValue>;
 import type { CubicBezierApi as CubicBezierRef } from '@tweakpane/plugin-essentials';
 import type { CubicBezierBladeParams as CubicBezierOptions } from '@tweakpane/plugin-essentials/dist/types/cubic-bezier/plugin.d.ts';
 declare const __propDef: {
@@ -35,18 +37,24 @@ declare const __propDef: {
 			 * Reference to internal Tweakpane
 			 * [`BladeApi`](https://tweakpane.github.io/docs/api/classes/BladeApi.html) for this blade.
 			 *
-			 * This is primarily for internal use, when implementing convenience components wrapping Blade's
-			 * functionality.
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Blade>`'s functionality.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+			 *
 			 * @bindable
 			 * @readonly
 			 */
 			ref?: CubicBezierRef | undefined;
 			/**
-			 * Imported Tweakpane `TpPluginBundle` (Aliased as `Plugin`) module to register before creating
-			 * the blade.
+			 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
+			 * the `<Blade>`'s containing `<Pane>`.
+			 *
+			 * This property is exposed for advanced use cases only, such as when implementing convenience
+			 * components wrapping `<Blade>`'s functionality in combination with a Tweakpane plugin.
+			 *
+			 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
 			 *
-			 * This is primarily for internal use, when implementing convenience components wrapping Blade's
-			 * functionality in combination with a Tweakpane plugin.
 			 * @default `undefined`
 			 */
 			plugin?: import('tweakpane').TpPluginBundle | undefined;
@@ -91,10 +99,21 @@ declare const __propDef: {
 		 * */
 		label?: string | undefined;
 	};
+	slots: {};
 	events: {
-		[evt: string]: CustomEvent<any>;
+		/**
+		 * Fires when `value` changes.
+		 *
+		 * _This event is provided for advanced use cases. It's usually preferred to bind to the `value` prop instead._
+		 *
+		 * The `event.details` payload includes a copy of the value and an `origin` field to distinguish between user-interactive changes (`internal`)
+		 * and changes resulting from programmatic manipulation of the `value` (`external`).
+		 *
+		 * @extends ValueChangeEvent
+		 * @event
+		 * */
+		change: CubicBezierChangeEvent;
 	};
-	slots: {};
 };
 export type CubicBezierProps = typeof __propDef.props;
 export type CubicBezierEvents = typeof __propDef.events;
@@ -115,13 +134,16 @@ export type CubicBezierSlots = typeof __propDef.slots;
  * [transition](https://svelte.dev/docs/svelte-transition), and
  * [animate](https://svelte.dev/docs/svelte-animate) modules.
  *
+ * @emits {CubicBezierChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
+ *
  * Usage outside of a `<Pane>` component will implicitly wrap the cubic bezier control in `<Pane
  * position='inline'>`.
  *
- * _Note: A memory leak has been observed in situations when the `value` prop is written frequently
- * from outside the component. See [issue
- * #18](https://github.com/tweakpane/plugin-essentials/issues/18) on the Plugin Essentials repo for
- * updates. Consider managing the lifecycle of this component with care until this issue is resolved._
+ * _Note: An issue with unreleased resources has been observed in situations when the `value` prop is
+ * set frequently. A [PR on the Plugin Essentials repo with a
+ * fix](https://github.com/tweakpane/plugin-essentials/pull/21) is currently pending a review and
+ * merge. Consider monitoring the performance of this component in the context of your use case until
+ * this issue is resolved._
  *
  * @example
  * ```svelte
@@ -136,7 +158,12 @@ export type CubicBezierSlots = typeof __propDef.slots;
  * import { tweened } from 'svelte/motion';
  *
  * // could also be a tuple
- * let value: CubicBezierValue = { x1: 0.25, y1: 0.1, x2: 0.25, y2: 1 };
+ * let value: CubicBezierValue = {
+ *   x1: 0.25,
+ *   y1: 0.1,
+ *   x2: 0.25,
+ *   y2: 1
+ * };
  * let duration = 1000;
  * let moods = ['Set', 'Rise'];
  * let mood: string = moods[0];

package/dist/control/Image.svelte

@@ -17,7 +17,7 @@
 	};
 </script>
 
-<GenericInput bind:value {options} plugin={pluginModule} {...$$restProps} />
+<GenericInput bind:value on:change {options} plugin={pluginModule} {...$$restProps} />
 {#if !BROWSER}
 	<ClsPad keysAdd={fillWith('containerVerticalPadding', 2)} theme={$$props.theme} />
 {/if}

package/dist/control/Image.svelte.d.ts

@@ -1,5 +1,7 @@
 import { SvelteComponent } from 'svelte';
+import type { ValueChangeEvent } from '../utils.js';
 export type ImageValue = 'placeholder' | File | HTMLImageElement | string | undefined;
+export type ImageChangeEvent = ValueChangeEvent<ImageValue>;
 declare const __propDef: {
 	props: Omit<
 		Omit<
@@ -47,18 +49,24 @@ declare const __propDef: {
 				 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
 				 * this control.
 				 *
-				 * This is primarily for internal use, when implementing convenience components wrapping
-				 * Binding's functionality.
+				 * This property is exposed for advanced use cases only, such as when implementing convenience
+				 * components wrapping `<Binding>`'s functionality.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+				 *
 				 * @bindable
 				 * @readonly
 				 */
 				ref?: import('../internal/GenericInput.svelte').GenericInputRef | undefined;
 				/**
 				 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-				 * the binding's containing `<Pane>`.
+				 * the `<Binding>`'s containing `<Pane>`.
+				 *
+				 * This property is exposed for advanced use cases only, such as when implementing convenience
+				 * components wrapping `<Binding>`'s functionality in combination with a Tweakpane plugin.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
 				 *
-				 * This is primarily for internal use, when implementing convenience components wrapping
-				 * Binding's functionality in combination with a Tweakpane plugin.
 				 * @default `undefined`
 				 */
 				plugin?: import('tweakpane').TpPluginBundle | undefined;
@@ -93,10 +101,21 @@ declare const __propDef: {
 		 */
 		fit?: 'contain' | 'cover' | undefined;
 	};
+	slots: {};
 	events: {
-		[evt: string]: CustomEvent<any>;
+		/**
+		 * Fires when `value` changes.
+		 *
+		 * _This event is provided for advanced use cases. It's usually preferred to bind to the `value` prop instead._
+		 *
+		 * The `event.details` payload includes a copy of the value and an `origin` field to distinguish between user-interactive changes (`internal`)
+		 * and changes resulting from programmatic manipulation of the `value` (`external`).
+		 *
+		 * @extends ValueChangeEvent
+		 * @event
+		 * */
+		change: ImageChangeEvent;
 	};
-	slots: {};
 };
 export type ImageProps = typeof __propDef.props;
 export type ImageEvents = typeof __propDef.events;
@@ -104,6 +123,8 @@ export type ImageSlots = typeof __propDef.slots;
 /**
  * An image input control.
  *
+ * _Important: This component has some rough edges, and should be considered experimental._
+ *
  * Integrates the [tweakpane-image-plugin](https://github.com/metehus/tweakpane-image-plugin),
  * incorporating work by [Florian Morel](http://ayamflow.fr), [Matheus
  * Dias](https://www.linkedin.com/in/matheusdbs/), [Palash Bansal](https://github.com/repalash), and
@@ -115,6 +136,10 @@ export type ImageSlots = typeof __propDef.slots;
  * [pull request](https://github.com/metehus/tweakpane-image-plugin/pull/1) with Tweakpane 4 support is
  * merged.
  *
+ * @emits {ImageChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
+ *
+ * There is currently a known bug where change events' `origin` values are sometimes incorrect. (This issue is limited to this component.)
+ *
  * Usage outside of a `<Pane>` component will implicitly wrap the image control in `<Pane
  * position='inline'>`.
  *

package/dist/control/IntervalSlider.svelte

@@ -34,4 +34,4 @@
 	$: meanValue, updateValueFromMean();
 </script>
 
-<GenericSlider bind:value={internalValue} plugin={pluginModule} {...$$restProps} />
+<GenericSlider bind:value={internalValue} on:change plugin={pluginModule} {...$$restProps} />

package/dist/control/IntervalSlider.svelte.d.ts

@@ -1,11 +1,13 @@
 import { SvelteComponent } from 'svelte';
 import type { Simplify } from '../utils';
+import type { ValueChangeEvent } from '../utils.js';
 export type IntervalSliderValueTuple = [min: number, max: number];
 export type IntervalSliderValueObject = {
 	min: number;
 	max: number;
 };
 export type IntervalSliderValue = Simplify<IntervalSliderValueObject | IntervalSliderValueTuple>;
+export type IntervalSliderChangeEvent = ValueChangeEvent<IntervalSliderValue>;
 declare const __propDef: {
 	props: Omit<
 		Omit<
@@ -53,18 +55,24 @@ declare const __propDef: {
 				 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
 				 * this control.
 				 *
-				 * This is primarily for internal use, when implementing convenience components wrapping
-				 * Binding's functionality.
+				 * This property is exposed for advanced use cases only, such as when implementing convenience
+				 * components wrapping `<Binding>`'s functionality.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
+				 *
 				 * @bindable
 				 * @readonly
 				 */
 				ref?: import('tweakpane').SliderInputBindingApi | undefined;
 				/**
 				 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
-				 * the binding's containing `<Pane>`.
+				 * the `<Binding>`'s containing `<Pane>`.
+				 *
+				 * This property is exposed for advanced use cases only, such as when implementing convenience
+				 * components wrapping `<Binding>`'s functionality in combination with a Tweakpane plugin.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
 				 *
-				 * This is primarily for internal use, when implementing convenience components wrapping
-				 * Binding's functionality in combination with a Tweakpane plugin.
 				 * @default `undefined`
 				 */
 				plugin?: import('tweakpane').TpPluginBundle | undefined;
@@ -94,7 +102,7 @@ declare const __propDef: {
 			 */
 			max?: number | undefined;
 			/**
-			 * A function to customize the point value's formatting (e.g. rounding, etc.).
+			 * A function to customize the point value's string representation (e.g. rounding, etc.).
 			 * @default `undefined`  \
 			 * Normal `.toString()` formatting.
 			 */
@@ -134,10 +142,21 @@ declare const __propDef: {
 		 * */
 		meanValue?: number | undefined;
 	};
+	slots: {};
 	events: {
-		[evt: string]: CustomEvent<any>;
+		/**
+		 * Fires when `value` changes.
+		 *
+		 * _This event is provided for advanced use cases. It's usually preferred to bind to the `value` prop instead._
+		 *
+		 * The `event.details` payload includes a copy of the value and an `origin` field to distinguish between user-interactive changes (`internal`)
+		 * and changes resulting from programmatic manipulation of the `value` (`external`).
+		 *
+		 * @extends ValueChangeEvent
+		 * @event
+		 * */
+		change: IntervalSliderChangeEvent;
 	};
-	slots: {};
 };
 export type IntervalSliderProps = typeof __propDef.props;
 export type IntervalSliderEvents = typeof __propDef.events;
@@ -153,6 +172,8 @@ export type IntervalSliderSlots = typeof __propDef.slots;
  * to object values. It also exposes a `meanValue` prop for reading or setting the midpoint of the
  * interval range value.
  *
+ * @emits {IntervalSliderChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
+ *
  * Usage outside of a `<Pane>` component will implicitly wrap the interval slider in `<Pane
  * position='inline'>`.
  *

package/dist/control/List.svelte

@@ -3,15 +3,26 @@
 <script generics="T extends any">
 	import Blade from '../core/Blade.svelte';
 	import ClsPad from '../internal/ClsPad.svelte';
+	import {} from '../utils';
 	import { BROWSER } from 'esm-env';
+	import copy from 'fast-copy';
+	import { shallowEqual } from 'fast-equals';
+	import { createEventDispatcher } from 'svelte';
 	export let value;
 	export let options;
 	export let label = void 0;
+	const dispatch = createEventDispatcher();
 	let listBlade;
 	let bladeOptions;
 	function addEvent() {
 		listBlade.on('change', (event) => {
-			value = event.value;
+			if (!shallowEqual(event.value, value)) {
+				value = event.value;
+				dispatch('change', {
+					value: copy(value),
+					origin: 'internal'
+				});
+			}
 		});
 	}
 	function getInitialValue() {
@@ -45,7 +56,13 @@
 				: options2.map((value2) => ({ value: value2, text: JSON.stringify(value2) }));
 	}
 	function setValue() {
-		listBlade.value = value;
+		if (!shallowEqual(listBlade.value, value)) {
+			listBlade.value = value;
+			dispatch('change', {
+				value: copy(value),
+				origin: 'external'
+			});
+		}
 	}
 	$: bladeOptions = {
 		value: getInitialValue(),