svelte-tweakpane-ui 1.1.3 → 1.2.0

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

@@ -1,5 +1,6 @@
 import { SvelteComponent } from 'svelte';
 import type { Simplify } from '../utils';
+import type { ValueChangeEvent } from '../utils.js';
 export type ListOptionsArray<T> = T[];
 export type ListOptionsObjectArray<T> = Array<{
 	value: T;
@@ -9,6 +10,7 @@ export type ListOptionsRecord<T> = Record<string, T>;
 export type ListOptions<T> = Simplify<
 	ListOptionsArray<T> | ListOptionsObjectArray<T> | ListOptionsRecord<T>
 >;
+export type ListChangeEvent = ValueChangeEvent<unknown>;
 import type { ListBladeApi, ListBladeParams } from 'tweakpane';
 declare class __sveltets_Render<T extends any> {
 	props(): Omit<
@@ -36,18 +38,24 @@ declare class __sveltets_Render<T extends any> {
 			 * 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?: ListBladeApi<T> | 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;
@@ -72,8 +80,19 @@ declare class __sveltets_Render<T extends any> {
 		 * */
 		options: ListOptions<T>;
 	};
-	events(): {} & {
-		[evt: string]: CustomEvent<any>;
+	events(): {
+		/**
+		 * 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: ListChangeEvent;
 	};
 	slots(): {};
 }
@@ -93,6 +112,8 @@ export type ListSlots<T extends any> = ReturnType<__sveltets_Render<T>['slots']>
  * Tweakpane's `addBlade` list variations is used instead of the `addBinding` method to allow for
  * additional value types. The `value` remains bindable via Svelte's reactivity.
  *
+ * @emits {ListChangeEvent} change - When `value` changes. (For advanced use cases. Prefer binding to `value`.)
+ *
  * Usage outside of a `<Pane>` component will implicitly wrap the color picker in `<Pane
  * position='inline'>`.
  *
@@ -101,7 +122,11 @@ export type ListSlots<T extends any> = ReturnType<__sveltets_Render<T>['slots']>
  * <script lang="ts">
  * import { List, type ListOptions } from 'svelte-tweakpane-ui';
  *
- * const options: ListOptions<number> = { b: 2, a: 1, c: 3 };
+ * const options: ListOptions<number> = {
+ *   b: 2,
+ *   a: 1,
+ *   c: 3
+ * };
  * let selection: number = 1;
  * </script>
  *

package/dist/control/Point.svelte

@@ -71,6 +71,7 @@
 <GenericInputFolding
 	bind:value={internalValue}
 	bind:expanded
+	on:change
 	{buttonClass}
 	{options}
 	{...removeKeys(

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

@@ -1,5 +1,6 @@
 import { SvelteComponent } from 'svelte';
 import type { Simplify } from '../utils';
+import type { ValueChangeEvent } from '../utils.js';
 import type { Point2dInputParams, Point3dInputParams, Point4dInputParams } from 'tweakpane';
 export type PointValue2dObject = {
 	x: number;
@@ -35,6 +36,7 @@ export type PointOptions<
 		: Dimensions extends '2'
 			? Point2dInputParams[Axis]
 			: never;
+export type PointChangeEvent = ValueChangeEvent<PointValue2d | PointValue3d | PointValue4d>;
 declare class __sveltets_Render<T extends PointValue2d | PointValue3d | PointValue4d> {
 	props(): Omit<
 		Omit<
@@ -90,18 +92,24 @@ declare class __sveltets_Render<T extends PointValue2d | PointValue3d | PointVal
 				 * [`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;
@@ -166,7 +174,7 @@ declare class __sveltets_Render<T extends PointValue2d | PointValue3d | PointVal
 		 * */
 		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.
 		 * */
@@ -286,8 +294,19 @@ declare class __sveltets_Render<T extends PointValue2d | PointValue3d | PointVal
 						| undefined;
 				}
 			: unknown);
-	events(): {} & {
-		[evt: string]: CustomEvent<any>;
+	events(): {
+		/**
+		 * 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: PointChangeEvent;
 	};
 	slots(): {};
 }
@@ -312,6 +331,8 @@ export type PointSlots<T extends PointValue2d | PointValue3d | PointValue4d> = R
  * `<Point>` is a dynamic component, and the availability of the `optionsZ` and `optionsW` props will
  * change depending on the number of dimensions in the `value`.
  *
+ * @emits {PointChangeEvent} 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 point picker in a `<Pane
  * position='inline'>` component.
  *
@@ -332,9 +353,17 @@ export type PointSlots<T extends PointValue2d | PointValue3d | PointValue4d> = R
  * let point3d: PointValue3d = [0, 0, 0];
  *
  * // dimension-specific option type needs to know the type of the point value
- * let point3dXOptions: PointOptions<'3', 'x'> = { min: -100, max: 100 };
+ * let point3dXOptions: PointOptions<'3', 'x'> = {
+ *   min: -100,
+ *   max: 100
+ * };
  *
- * let point4d: PointValue4d = { x: 0, y: 0, z: 0, w: 0 };
+ * let point4d: PointValue4d = {
+ *   x: 0,
+ *   y: 0,
+ *   z: 0,
+ *   w: 0
+ * };
  * </script>
  *
  * <Point

package/dist/control/RadioGrid.svelte

@@ -1,4 +1,6 @@
-<script generics="T extends number | string | boolean">
+<script context="module"></script>
+
+<script generics="T extends boolean | number | string">
 	import * as pluginModule from '@tweakpane/plugin-essentials';
 	import ClsPad from '../internal/ClsPad.svelte';
 	import GenericInput from '../internal/GenericInput.svelte';
@@ -35,7 +37,7 @@
 	};
 </script>
 
-<GenericInput bind:value {options} plugin={pluginModule} {...$$restProps} />
+<GenericInput bind:value on:change {options} plugin={pluginModule} {...$$restProps} />
 {#if !BROWSER}
 	<ClsPad keysAdd={fillWith('containerUnitSize', gridDimensions.rows - 1)} theme={$$props.theme} />
 	<div style:height={`${2 * (gridDimensions.rows - 1)}px`} />

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

@@ -1,5 +1,7 @@
 import { SvelteComponent } from 'svelte';
-declare class __sveltets_Render<T extends number | string | boolean> {
+import type { ValueChangeEvent } from '../utils.js';
+export type RadioGridChangeEvent = ValueChangeEvent<boolean | number | string>;
+declare class __sveltets_Render<T extends boolean | number | string> {
 	props(): Omit<
 		Omit<
 			{
@@ -59,18 +61,24 @@ declare class __sveltets_Render<T extends number | string | boolean> {
 				 * [`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;
@@ -132,18 +140,29 @@ declare class __sveltets_Render<T extends number | string | boolean> {
 		 * */
 		values: T[];
 	};
-	events(): {} & {
-		[evt: string]: CustomEvent<any>;
+	events(): {
+		/**
+		 * 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: RadioGridChangeEvent;
 	};
 	slots(): {};
 }
-export type RadioGridProps<T extends number | string | boolean> = ReturnType<
+export type RadioGridProps<T extends boolean | number | string> = ReturnType<
 	__sveltets_Render<T>['props']
 >;
-export type RadioGridEvents<T extends number | string | boolean> = ReturnType<
+export type RadioGridEvents<T extends boolean | number | string> = ReturnType<
 	__sveltets_Render<T>['events']
 >;
-export type RadioGridSlots<T extends number | string | boolean> = ReturnType<
+export type RadioGridSlots<T extends boolean | number | string> = ReturnType<
 	__sveltets_Render<T>['slots']
 >;
 /**
@@ -168,6 +187,7 @@ export type RadioGridSlots<T extends number | string | boolean> = ReturnType<
  *
  *   - If both `rows` _and_ `columns` props area provided, then buttons may be clipped if `rows * columns < values.length`.
  *
+ * @emits {RadioGridChangeEvent} 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 radio grid in `<Pane
  * position='inline'>`.
@@ -197,7 +217,12 @@ export type RadioGridSlots<T extends number | string | boolean> = ReturnType<
  *
  * <div class="demo">
  * {#key value}
- *   <div class="swatch" style:--e={end} style:--s={start} transition:fade></div>
+ *   <div
+ *     class="swatch"
+ *     style:--e={end}
+ *     style:--s={start}
+ *     transition:fade
+ *   ></div>
  * {/key}
  * </div>
  *
@@ -221,7 +246,7 @@ export type RadioGridSlots<T extends number | string | boolean> = ReturnType<
  * @sourceLink
  * [RadioGrid.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/control/RadioGrid.svelte)
  */
-export default class RadioGrid<T extends number | string | boolean> extends SvelteComponent<
+export default class RadioGrid<T extends boolean | number | string> extends SvelteComponent<
 	RadioGridProps<T>,
 	RadioGridEvents<T>,
 	RadioGridSlots<T>

package/dist/control/Ring.svelte

@@ -16,4 +16,4 @@
 	};
 </script>
 
-<GenericSlider bind:value {options} plugin={pluginModule} {...$$restProps} />
+<GenericSlider bind:value on:change {options} plugin={pluginModule} {...$$restProps} />

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

@@ -1,5 +1,6 @@
 import { SvelteComponent } from 'svelte';
 import type { RingSeries } from '@tweakpane/plugin-camerakit/dist/types/util.js';
+import type { ValueChangeEvent } from '../utils.js';
 type RingUnit = {
 	/**
 	 * The value for the unit.
@@ -25,6 +26,7 @@ type RingUnit = {
 	ticks: number;
 };
 export type { RingSeries, RingUnit };
+export type RingChangeEvent = ValueChangeEvent<number>;
 declare const __propDef: {
 	props: Omit<
 		Omit<
@@ -72,18 +74,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;
@@ -109,9 +117,14 @@ declare const __propDef: {
 			 * Specifying both a `min` and a `max` prop turns the control into a slider.
 			 * @default `undefined`
 			 */
-			max?: number | undefined;
+			max?: number | undefined /**
+			 * The number of vertical tick marks between each `value` label on the ring.
+			 *
+			 * For example, if `pixels` is `100`, `value` is `10, and `ticks` is `10`, you will have a
+			 * vertical tick mark every 10 pixels, and a value label every 100 pixels.
+			 */;
 			/**
-			 * 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.
 			 */
@@ -154,16 +167,27 @@ declare const __propDef: {
 		 * */
 		unit?: RingUnit | undefined;
 		/**
-		 * When `true`, expand the width of the ring control at the expense of the numerical input
+		 * When `true`, expand the width of the ring control at the expense of the numeric input
 		 * field.
 		 * @default `false`
 		 * */
 		wide?: boolean | 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: RingChangeEvent;
 	};
-	slots: {};
 };
 export type RingProps = typeof __propDef.props;
 export type RingEvents = typeof __propDef.events;
@@ -177,6 +201,8 @@ export type RingSlots = typeof __propDef.slots;
  * control from Tweakpane-creator [Hiroki Kokubun's](https://cocopon.me) [Camerakit
  * plugin](https://github.com/tweakpane/plugin-camerakit).
  *
+ * @emits {RingChangeEvent} 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 ring in `<Pane position='inline'>`.
  *
  * @example

package/dist/control/RotationEuler.svelte

@@ -47,6 +47,7 @@
 <GenericInputFolding
 	bind:value={internalValue}
 	bind:expanded
+	on:change
 	{buttonClass}
 	{options}
 	plugin={pluginModule}

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

@@ -3,6 +3,7 @@ import type { EulerOrder } from '@0b5vr/tweakpane-plugin-rotation/dist/types/Eul
 import type { EulerUnit } from '@0b5vr/tweakpane-plugin-rotation/dist/types/EulerUnit.js';
 import type { PointDimensionParams } from '@tweakpane/core';
 import type { Simplify } from '../utils';
+import type { ValueChangeEvent } from '../utils.js';
 export type RotationEulerOptions = Simplify<PointDimensionParams>;
 export type RotationEulerOrder = EulerOrder;
 export type RotationEulerUnit = EulerUnit;
@@ -13,6 +14,7 @@ export type RotationEulerValueObject = {
 };
 export type RotationEulerValueTuple = [x: number, y: number, z: number];
 export type RotationEulerValue = Simplify<RotationEulerValueObject | RotationEulerValueTuple>;
+export type RotationEulerChangeEvent = ValueChangeEvent<RotationEulerValue>;
 import type { RotationInputPluginEulerParams as RotationEulerOptionsInternal } from '@0b5vr/tweakpane-plugin-rotation/dist/types/RotationInputPluginEulerParams';
 declare const __propDef: {
 	props: Omit<
@@ -24,71 +26,7 @@ declare const __propDef: {
 				 */
 				object: import('@tweakpane/core').Bindable & Record<string, RotationEulerValue>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string /**
-				 * Integrates the [euler
-				 * rotation](https://github.com/0b5vr/tweakpane-plugin-rotation/blob/dev/src/RotationInputPluginEuler.ts)
-				 * control from [0b5vr's](https://0b5vr.com)
-				 * [tweakpane-plugin-rotation](https://github.com/0b5vr/tweakpane-plugin-rotation).
-				 *
-				 * _Svelte Tweakpane UI_ extends the original API to support tuple values in addition to object values.
-				 * (Useful when working with frameworks like [three.js](https://threejs.org) /
-				 * [threlte](https://threlte.xyz).)
-				 *
-				 * A utility function `Utils.eulerToCssTransform()` is also provided to easily convert a quaternion
-				 * value object or tuple into a CSS transform string.
-				 *
-				 * See also <RotationQuaternion> if you're feeling gimbal locked.
-				 *
-				 * Usage outside of a `<Pane>` component will implicitly wrap the profiler in `<Pane
-				 * position='inline'>`.
-				 *
-				 * @example
-				 * ```svelte
-				 * <script lang="ts">
-				 * import {
-				 *   Button,
-				 *   RotationEuler,
-				 *   type RotationEulerValueObject,
-				 *   Utils
-				 * } from 'svelte-tweakpane-ui';
-				 *
-				 * // Value could also be a tuple
-				 * // e.g. [0, 0, 0]
-				 * let value: RotationEulerValueObject = { x: 0, y: 0, z: 0 };
-				 *
-				 * $: transform = Utils.eulerToCssTransform(value);
-				 * $: valueRows = Object.values(value)
-				 *   .map((v) => `${v >= 0 ? '+' : ''}${v.toFixed(6)}`)
-				 *   .join('\n');
-				 * </script>
-				 *
-				 * <RotationEuler
-				 * bind:value
-				 * expanded={true}
-				 * label="CSS Rotation"
-				 * picker={'inline'}
-				 * />
-				 * <Button on:click={() => (value = { x: 0, y: 0, z: 0 })} title="Reset" />
-				 *
-				 * <div class="billboard" style:transform>
-				 * <pre>{valueRows}</pre>
-				 * </div>
-				 *
-				 * <style>
-				 * div.billboard {
-				 *   display: flex;
-				 *   align-items: center;
-				 *   justify-content: center;
-				 *   aspect-ratio: 1;
-				 *   width: 100%;
-				 *   background: linear-gradient(45deg, magenta, orange);
-				 * }
-				 * </style>
-				 * ```
-				 *
-				 * @sourceLink
-				 * [RotationEuler.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/control/RotationEuler.svelte)
-				 */;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`
@@ -125,18 +63,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/core').TpPluginBundle | undefined;
@@ -254,10 +198,21 @@ declare const __propDef: {
 		 */
 		unit?: EulerUnit | 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: RotationEulerChangeEvent;
 	};
-	slots: {};
 };
 export type RotationEulerProps = typeof __propDef.props;
 export type RotationEulerEvents = typeof __propDef.events;
@@ -277,6 +232,8 @@ export type RotationEulerSlots = typeof __propDef.slots;
  *
  * See also <RotationQuaternion> if you're feeling gimbal locked.
  *
+ * @emits {RotationEulerChangeEvent} 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 profiler in `<Pane
  * position='inline'>`.
  *
@@ -292,7 +249,11 @@ export type RotationEulerSlots = typeof __propDef.slots;
  *
  * // Value could also be a tuple
  * // e.g. [0, 0, 0]
- * let value: RotationEulerValueObject = { x: 0, y: 0, z: 0 };
+ * let value: RotationEulerValueObject = {
+ *   x: 0,
+ *   y: 0,
+ *   z: 0
+ * };
  *
  * $: transform = Utils.eulerToCssTransform(value);
  * $: valueRows = Object.values(value)
@@ -306,7 +267,15 @@ export type RotationEulerSlots = typeof __propDef.slots;
  * label="CSS Rotation"
  * picker={'inline'}
  * />
- * <Button on:click={() => (value = { x: 0, y: 0, z: 0 })} title="Reset" />
+ * <Button
+ * on:click={() =>
+ *   (value = {
+ *     x: 0,
+ *     y: 0,
+ *     z: 0
+ *   })}
+ * title="Reset"
+ * />
  *
  * <div class="billboard" style:transform>
  * <pre>{valueRows}</pre>

package/dist/control/RotationQuaternion.svelte

@@ -45,6 +45,7 @@
 <GenericInputFolding
 	bind:value={internalValue}
 	bind:expanded
+	on:change
 	{buttonClass}
 	{options}
 	plugin={pluginModule}