svelte-tweakpane-ui 1.2.3 → 1.2.4

package/dist/control/Button.svelte

@@ -48,7 +48,7 @@
 
 {#if parentStore}
 	{#if BROWSER}
-		<div bind:this={indexElement} style="display: none;" />
+		<div bind:this={indexElement} style="display: none;"></div>
 	{:else}
 		<ClsPad keysAdd={['containerUnitSize', 'containerVerticalPadding']} {theme} />
 	{/if}

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

@@ -10,7 +10,35 @@ export type ButtonGridClickEvent = CustomEvent<{
 import type { ButtonGridApi as ButtonGridRef } from '@tweakpane/plugin-essentials';
 import type { ButtonGridBladeParams as ButtonGridOptions } from '@tweakpane/plugin-essentials/dist/types/button-grid/plugin.d.ts';
 declare const __propDef: {
-	props: Omit<
+	props: {
+		/**
+		 * Array of names, each of which will become the title of a button in the grid.
+		 * */
+		buttons: string[];
+		/**
+		 * Number of columns to arrange the buttons into.
+		 *
+		 * Setting `columns` without setting `rows` will lock the column count and allow the row
+		 * count to change dynamically based on the number of buttons.
+		 * @default `undefined`  \
+		 * Dynamic based on quantity of `buttons`.
+		 * */
+		columns?: number | undefined;
+		/**
+		 * Text displayed next to the button grid.
+		 * @default `undefined`
+		 */
+		label?: string | undefined;
+		/**
+		 * Number of rows to arrange the buttons into.
+		 *
+		 * Setting `rows` without setting `columns` will lock the column count and allow the column
+		 * count to change dynamically based on the number of buttons.
+		 * @default `undefined`  \
+		 * Dynamic based on quantity of `buttons`.
+		 * */
+		rows?: number | undefined;
+	} & Omit<
 		{
 			/**
 			 * Blade configuration exposing Tweakpane's internal
@@ -57,35 +85,7 @@ declare const __propDef: {
 			plugin?: import('tweakpane').TpPluginBundle | undefined;
 		},
 		'ref' | 'options' | 'plugin'
-	> & {
-		/**
-		 * Array of names, each of which will become the title of a button in the grid.
-		 * */
-		buttons: string[];
-		/**
-		 * Number of columns to arrange the buttons into.
-		 *
-		 * Setting `columns` without setting `rows` will lock the column count and allow the row
-		 * count to change dynamically based on the number of buttons.
-		 * @default `undefined`  \
-		 * Dynamic based on quantity of `buttons`.
-		 * */
-		columns?: number | undefined;
-		/**
-		 * Text displayed next to the button grid.
-		 * @default `undefined`
-		 */
-		label?: string | undefined;
-		/**
-		 * Number of rows to arrange the buttons into.
-		 *
-		 * Setting `rows` without setting `columns` will lock the column count and allow the column
-		 * count to change dynamically based on the number of buttons.
-		 * @default `undefined`  \
-		 * Dynamic based on quantity of `buttons`.
-		 * */
-		rows?: number | undefined;
-	};
+	>;
 	slots: {};
 	events: {
 		/**

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

@@ -3,7 +3,13 @@ import type { ValueChangeEvent } from '../utils.js';
 export type CheckboxChangeEvent = ValueChangeEvent<boolean>;
 declare const __propDef: {
 	props: Omit<
-		Omit<
+		{
+			/**
+			 * The value to control.
+			 * @bindable
+			 */
+			value: boolean;
+		} & Omit<
 			{
 				/**
 				 * The binding's target object with values to manipulate.
@@ -71,13 +77,7 @@ declare const __propDef: {
 				plugin?: import('tweakpane').TpPluginBundle | undefined;
 			},
 			'object' | 'key'
-		> & {
-			/**
-			 * The value to control.
-			 * @bindable
-			 */
-			value: boolean;
-		},
+		>,
 		'ref' | 'options' | 'plugin'
 	>;
 	slots: {};

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

@@ -20,85 +20,22 @@ export type ColorValue = Simplify<
 export type ColorChangeEvent = ValueChangeEvent<ColorValue>;
 import type { ColorInputParams as ColorOptions } from 'tweakpane';
 declare const __propDef: {
-	props: Omit<
-		Omit<
-			{
-				/**
-				 * The binding's target object with values to manipulate.
-				 * @bindable
-				 */
-				object: import('@tweakpane/core').Bindable & Record<string, ColorValue>;
-				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string;
-				/**
-				 * Prevent interactivity and gray out the control.
-				 * @default `false`
-				 */
-				disabled?: boolean | undefined;
-				/**
-				 * Text displayed next to control.
-				 * @default `undefined`
-				 */
-				label?: string | undefined;
-				/**
-				 * Tweakpane's internal options object.
-				 *
-				 * See [`BindingParams`](https://tweakpane.github.io/docs/api/types/BindingParams.html).
-				 *
-				 * Valid types are contingent on the type of the value `key` points to in `object`.
-				 *
-				 * This is intended internal use, when implementing convenience components wrapping Binding's
-				 * functionality. Options of interest are instead exposed as top-level props in _Svelte
-				 * Tweakpane UI_.
-				 * @default `undefined`
-				 */
-				options?: ColorOptions | undefined;
-				/**
-				 * Custom color scheme.
-				 *
-				 * @default `undefined`  \
-				 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
-				 * set with `setGlobalDefaultTheme()`.
-				 */
-				theme?: import('..').Theme | undefined;
-				/**
-				 * Reference to internal Tweakpane
-				 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
-				 * this control.
-				 *
-				 * 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>`.
-				 *
-				 * 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.
-				 *
-				 * @default `undefined`
-				 */
-				plugin?: import('tweakpane').TpPluginBundle | undefined;
-			},
-			'object' | 'key'
-		> & {
-			/**
-			 * A color value to control.
-			 *
-			 * Use either a color-like string (e.g. #ff00ff), or an object with `r`, `b`, `g`, and
-			 * optional `a` keys.
-			 * @bindable
-			 */
-			value: ColorValue;
-		} & {
+	props: {
+		/**
+		 * A color value to control.
+		 *
+		 * Use either a color-like string (e.g. #ff00ff), or an object with `r`, `b`, `g`, and
+		 * optional `a` keys.
+		 * @bindable
+		 * */
+		value: ColorValue;
+		/**
+		 * Whether to treat values as floats from 0.0 to 1.0, or integers from 0 to 255.
+		 * @default `'int'`
+		 * */
+		type?: 'float' | 'int' | undefined;
+	} & Omit<
+		{
 			/**
 			 * DOM class name of the button used to expand and collapse the input's picker.
 			 * @default `undefined`
@@ -120,23 +57,86 @@ declare const __propDef: {
 			 * @default `true`
 			 */
 			userExpandable?: boolean | undefined;
-		},
+		} & {
+			/**
+			 * A color value to control.
+			 *
+			 * Use either a color-like string (e.g. #ff00ff), or an object with `r`, `b`, `g`, and
+			 * optional `a` keys.
+			 * @bindable
+			 */
+			value: ColorValue;
+		} & Omit<
+				{
+					/**
+					 * The binding's target object with values to manipulate.
+					 * @bindable
+					 */
+					object: import('@tweakpane/core').Bindable & Record<string, ColorValue>;
+					/** The key for the value in the target `object` that the control should manipulate. */
+					key: string;
+					/**
+					 * Prevent interactivity and gray out the control.
+					 * @default `false`
+					 */
+					disabled?: boolean | undefined;
+					/**
+					 * Text displayed next to control.
+					 * @default `undefined`
+					 */
+					label?: string | undefined;
+					/**
+					 * Tweakpane's internal options object.
+					 *
+					 * See [`BindingParams`](https://tweakpane.github.io/docs/api/types/BindingParams.html).
+					 *
+					 * Valid types are contingent on the type of the value `key` points to in `object`.
+					 *
+					 * This is intended internal use, when implementing convenience components wrapping Binding's
+					 * functionality. Options of interest are instead exposed as top-level props in _Svelte
+					 * Tweakpane UI_.
+					 * @default `undefined`
+					 */
+					options?: ColorOptions | undefined;
+					/**
+					 * Custom color scheme.
+					 *
+					 * @default `undefined`  \
+					 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
+					 * set with `setGlobalDefaultTheme()`.
+					 */
+					theme?: import('..').Theme | undefined;
+					/**
+					 * Reference to internal Tweakpane
+					 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
+					 * this control.
+					 *
+					 * 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>`.
+					 *
+					 * 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.
+					 *
+					 * @default `undefined`
+					 */
+					plugin?: import('tweakpane').TpPluginBundle | undefined;
+				},
+				'object' | 'key'
+			>,
 		'ref' | 'options' | 'plugin' | 'buttonClass'
-	> & {
-		/**
-		 * A color value to control.
-		 *
-		 * Use either a color-like string (e.g. #ff00ff), or an object with `r`, `b`, `g`, and
-		 * optional `a` keys.
-		 * @bindable
-		 * */
-		value: ColorValue;
-		/**
-		 * Whether to treat values as floats from 0.0 to 1.0, or integers from 0 to 255.
-		 * @default `'int'`
-		 * */
-		type?: 'float' | 'int' | undefined;
-	};
+	>;
 	slots: {};
 	events: {
 		/**
@@ -178,7 +178,7 @@ export type ColorSlots = typeof __propDef.slots;
  * <Color bind:value={startColor} label="Start Color" />
  * <Color bind:value={endColor} label="End Color" />
  *
- * <div class="demo" style:--a={startColor} style:--b={endColor} />
+ * <div class="demo" style:--a={startColor} style:--b={endColor}></div>
  *
  * <style>
  * .demo {

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

@@ -13,8 +13,46 @@ 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: {
-	props: Omit<
+	props: {
+		/**
+		 * The cubic bezier value to control.
+		 *
+		 * Object value type is a convenience added by _Svelte Tweakpane UI_, and is not part of the
+		 * original `@tweakpane/plugin-essentials` API.
+		 * @bindable
+		 */
+		value: CubicBezierValue;
+		/**
+		 * Text displayed next to the control.
+		 * @default `undefined`
+		 * */
+		label?: string | undefined;
+	} & Omit<
 		{
+			/**
+			 * DOM class name of the button used to expand and collapse the blade's picker.
+			 * @default `undefined`
+			 */
+			buttonClass?: string | undefined;
+			/**
+			 * Expand or collapse the blade's picker.
+			 * @default `true`
+			 * @bindable
+			 */
+			expanded?: boolean | undefined;
+			/**
+			 * The style of value "picker" to use in the blade.
+			 * @default `'popup'`
+			 */
+			picker?: 'inline' | 'popup' | undefined;
+			/**
+			 * Allow users to interactively expand / contract the value picker by clicking its icon.
+			 *
+			 * Most useful when `picker` is `inline`.
+			 * @default `true`
+			 */
+			userExpandable?: boolean | undefined;
+		} & {
 			/**
 			 * Blade configuration exposing Tweakpane's internal
 			 * [`BladeParams`](https://tweakpane.github.io/docs/api/interfaces/BaseBladeParams.html).
@@ -58,47 +96,9 @@ declare const __propDef: {
 			 * @default `undefined`
 			 */
 			plugin?: import('tweakpane').TpPluginBundle | undefined;
-		} & {
-			/**
-			 * DOM class name of the button used to expand and collapse the blade's picker.
-			 * @default `undefined`
-			 */
-			buttonClass?: string | undefined;
-			/**
-			 * Expand or collapse the blade's picker.
-			 * @default `true`
-			 * @bindable
-			 */
-			expanded?: boolean | undefined;
-			/**
-			 * The style of value "picker" to use in the blade.
-			 * @default `'popup'`
-			 */
-			picker?: 'inline' | 'popup' | undefined;
-			/**
-			 * Allow users to interactively expand / contract the value picker by clicking its icon.
-			 *
-			 * Most useful when `picker` is `inline`.
-			 * @default `true`
-			 */
-			userExpandable?: boolean | undefined;
 		},
 		'ref' | 'options' | 'plugin' | 'buttonClass'
-	> & {
-		/**
-		 * The cubic bezier value to control.
-		 *
-		 * Object value type is a convenience added by _Svelte Tweakpane UI_, and is not part of the
-		 * original `@tweakpane/plugin-essentials` API.
-		 * @bindable
-		 */
-		value: CubicBezierValue;
-		/**
-		 * Text displayed next to the control.
-		 * @default `undefined`
-		 * */
-		label?: string | undefined;
-	};
+	>;
 	slots: {};
 	events: {
 		/**
@@ -194,7 +194,7 @@ export type CubicBezierSlots = typeof __propDef.slots;
  * <RadioGrid bind:value={mood} values={['Rise', 'Set']} />
  *
  * <div class="demo" style:--a="{twilightAmount}%">
- * <div class="celestial-object" style:--t="{celestialHeight}%" />
+ * <div class="celestial-object" style:--t="{celestialHeight}%"></div>
  * </div>
  *
  * <style>

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

@@ -3,8 +3,34 @@ 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<
+	props: {
+		/**
+		 * Image data
+		 * @default `'placeholder'`
+		 * @bindable
+		 */
+		value?: ImageValue;
+		/**
+		 * Array of image extension types to accept.
+		 * @default `['.jpg', '.png', '.gif']`
+		 */
+		extensions?: string[] | undefined;
+		/**
+		 * How to display the image in the preview pane.
+		 *
+		 * Renamed from `imageFit` in `tweakpane-image-plugin` for concision.
+		 * @default `'cover'`
+		 */
+		fit?: 'contain' | 'cover' | undefined;
+	} & Omit<
+		{
+			/**
+			 * Image data
+			 * @default `'placeholder'`
+			 * @bindable
+			 */
+			value: ImageValue;
+		} & Omit<
 			{
 				/**
 				 * The binding's target object with values to manipulate.
@@ -72,35 +98,9 @@ declare const __propDef: {
 				plugin?: import('tweakpane').TpPluginBundle | undefined;
 			},
 			'object' | 'key'
-		> & {
-			/**
-			 * Image data
-			 * @default `'placeholder'`
-			 * @bindable
-			 */
-			value: ImageValue;
-		},
+		>,
 		'ref' | 'plugin' | 'value'
-	> & {
-		/**
-		 * Image data
-		 * @default `'placeholder'`
-		 * @bindable
-		 */
-		value?: ImageValue;
-		/**
-		 * Array of image extension types to accept.
-		 * @default `['.jpg', '.png', '.gif']`
-		 */
-		extensions?: string[] | undefined;
-		/**
-		 * How to display the image in the preview pane.
-		 *
-		 * Renamed from `imageFit` in `tweakpane-image-plugin` for concision.
-		 * @default `'cover'`
-		 */
-		fit?: 'contain' | 'cover' | undefined;
-	};
+	>;
 	slots: {};
 	events: {
 		/**