svelte-tweakpane-ui 1.2.1 → 1.2.3

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

@@ -40,7 +40,7 @@ export type ButtonSlots = typeof __propDef.slots;
  *
  * Wraps the Tweakpane [`addButton`](https://tweakpane.github.io/docs/ui-components/#button) method.
  *
- * Usage outside of a `<Pane>` component will implicitly wrap the button in `<Pane position='inline'>`.
+ * Usage outside of a `<Pane>` component will implicitly wrap the button in `<Pane position="inline">`.
  *
  * See the `<ButtonGrid>` and `<RadioGrid>` components for a convenient way to lay out multiple
  * buttons.

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

@@ -118,10 +118,10 @@ export type ButtonGridSlots = typeof __propDef.slots;
  *
  *   - If both `rows` _and_ `columns` props area provided, then buttons may be clipped if `rows * columns < values.length`.
  *
- * @emits {ButtonGridClickEvent} click - When a button in the grid is clicked.
- *
  * Usage outside of a `<Pane>` component will implicitly wrap the button grid in `<Pane
- * position='inline'>`.
+ * position="inline">`.
+ *
+ * @emits {ButtonGridClickEvent} click - When a button in the grid is clicked.
  *
  * @example
  * ```svelte

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

@@ -104,17 +104,16 @@ 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">`.
  *
- * Usage outside of a `<Pane>` component will implicitly wrap the checkbox in `<Pane
- * position='inline'>`.
+ * @emits {CheckboxChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
  *
  * @example
  * ```svelte
  * <script lang="ts">
- * import { Checkbox } from 'svelte-tweakpane-ui';
+ *  import { Checkbox } from 'svelte-tweakpane-ui';
  *
- * let reticulationEnabled: boolean = false;
+ *  let reticulationEnabled: boolean = false;
  * </script>
  *
  * <Checkbox bind:value={reticulationEnabled} label="Reticulation" />

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

@@ -161,10 +161,10 @@ 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'>`.
+ * position="inline">`.
+ *
+ * @emits {ColorChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
  *
  * @example
  * ```svelte

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

@@ -134,10 +134,8 @@ 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'>`.
+ * position="inline">`.
  *
  * _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
@@ -145,6 +143,8 @@ export type CubicBezierSlots = typeof __propDef.slots;
  * merge. Consider monitoring the performance of this component in the context of your use case until
  * this issue is resolved._
  *
+ * @emits {CubicBezierChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
+ *
  * @example
  * ```svelte
  * <script lang="ts">

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

@@ -136,12 +136,12 @@ 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'>`.
+ * position="inline">`.
+ *
+ * @emits {ImageChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
  *
  * @example
  * ```svelte

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

@@ -172,10 +172,10 @@ 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'>`.
+ * position="inline">`.
+ *
+ * @emits {IntervalSliderChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
  *
  * @example
  * ```svelte

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

@@ -112,10 +112,10 @@ 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'>`.
+ * position="inline">`.
+ *
+ * @emits {ListChangeEvent} change - When `value` changes. (For advanced use cases. Prefer binding to `value`.)
  *
  * @example
  * ```svelte

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

@@ -331,10 +331,10 @@ 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.
+ * position="inline">` component.
+ *
+ * @emits {PointChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
  *
  * @example
  * ```svelte

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

@@ -187,10 +187,10 @@ export type RadioGridSlots<T extends boolean | number | string> = 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'>`.
+ * position="inline">`.
+ *
+ * @emits {RadioGridChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
  *
  * @example
  * ```svelte

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

@@ -201,9 +201,9 @@ 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">`.
  *
- * Usage outside of a `<Pane>` component will implicitly wrap the ring in `<Pane position='inline'>`.
+ * @emits {RingChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
  *
  * @example
  * ```svelte

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

@@ -232,10 +232,10 @@ 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'>`.
+ * position="inline">`.
+ *
+ * @emits {RotationEulerChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
  *
  * @example
  * ```svelte

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

@@ -230,52 +230,52 @@ export type RotationQuaternionSlots = typeof __propDef.slots;
  *
  * See also <RotationEuler> if you're not into the whole `w` thing.
  *
- * @emits {RotationQuaternionChangeEvent} 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'>`.
+ * position="inline">`.
+ *
+ * @emits {RotationQuaternionChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
  *
  * @example
  * ```svelte
  * <script lang="ts">
- * import {
- *   Button,
- *   RotationQuaternion,
- *   type RotationQuaternionValue,
- *   Utils
- * } from 'svelte-tweakpane-ui';
+ *  import {
+ *    Button,
+ *    RotationQuaternion,
+ *    type RotationQuaternionValue,
+ *    Utils
+ *  } from 'svelte-tweakpane-ui';
  *
- * // Value could also be an object
- * // e.g. {x: 0, y: 0, z: 0, w: 0}
- * let value: RotationQuaternionValue = [0, 0, 0, 0];
+ *  // Value could also be an object
+ *  // e.g. {x: 0, y: 0, z: 0, w: 0}
+ *  let value: RotationQuaternionValue = [0, 0, 0, 0];
  *
- * $: transform = Utils.quaternionToCssTransform(value);
- * $: valueRows = Array.isArray(value)
- *   ? value.map((v) => `${v >= 0 ? '+' : ''}${v.toFixed(6)}`).join('\n')
- *   : '';
+ *  $: transform = Utils.quaternionToCssTransform(value);
+ *  $: valueRows = Array.isArray(value)
+ *    ? value.map((v) => `${v >= 0 ? '+' : ''}${v.toFixed(6)}`).join('\n')
+ *    : '';
  * </script>
  *
  * <RotationQuaternion
- * bind:value
- * expanded={true}
- * label="CSS Rotation"
- * picker={'inline'}
+ *  bind:value
+ *  expanded={true}
+ *  label="CSS Rotation"
+ *  picker={'inline'}
  * />
  * <Button on:click={() => (value = [0, 0, 0, 0])} title="Reset" />
  *
  * <div class="billboard" style:transform>
- * <pre>{valueRows}</pre>
+ *  <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);
- * }
+ *  div.billboard {
+ *    display: flex;
+ *    align-items: center;
+ *    justify-content: center;
+ *    aspect-ratio: 1;
+ *    width: 100%;
+ *    background: linear-gradient(45deg, magenta, orange);
+ *  }
  * </style>
  * ```
  *

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

@@ -155,24 +155,24 @@ export type SliderSlots = typeof __propDef.slots;
  *
  * See the `<Interval>` component for a multi-handle range-defining slider.
  *
- * @emits {SliderChangeEvent} 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 slider in `<Pane position="inline">`.
  *
- * Usage outside of a `<Pane>` component will implicitly wrap the slider in `<Pane position='inline'>`.
+ * @emits {SliderChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
  *
  * @example
  * ```svelte
  * <script lang="ts">
- * import { Slider } from 'svelte-tweakpane-ui';
+ *  import { Slider } from 'svelte-tweakpane-ui';
  *
- * let value = 0;
+ *  let value = 0;
  * </script>
  *
  * <Slider
- * bind:value
- * min={-1}
- * max={1}
- * format={(v) => v.toFixed(2)}
- * label="Let it Slide"
+ *  bind:value
+ *  min={-1}
+ *  max={1}
+ *  format={(v) => v.toFixed(2)}
+ *  label="Let it Slide"
  * />
  * <pre>Value: {value}</pre>
  * ```

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

@@ -124,10 +124,10 @@ export type TextSlots = typeof __propDef.slots;
  *
  * See `<TextArea>` for a multi-line input variation.
  *
- * @emits {TextChangeEvent} 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 text field in `<Pane
- * position='inline'>`.
+ * position="inline">`.
+ *
+ * @emits {TextChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
  *
  * @example
  * ```svelte

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

@@ -136,12 +136,12 @@ export type TextareaSlots = typeof __propDef.slots;
  * Extends the underlying implementation with the `live` property to match the
  * behavior of the `<Text>` component.
  *
+ * Usage outside of a `<Pane>` component will implicitly wrap the text area in
+ * `<Pane position="inline">`.
+ *
  * @emits {TextareaChangeEvent} 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 text area in
- * `<Pane position='inline'>`.
- *
  * @example
  * ```svelte
  * <script lang="ts">

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

@@ -166,9 +166,9 @@ export type WheelSlots = typeof __propDef.slots;
  * control from Tweakpane-creator [Hiroki Kokubun's](https://cocopon.me) [Camerakit
  * plugin](https://github.com/tweakpane/plugin-camerakit).
  *
- * @emits {WheelChangeEvent} 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 wheel in `<Pane position="inline">`.
  *
- * Usage outside of a `<Pane>` component will implicitly wrap the wheel in `<Pane position='inline'>`.
+ * @emits {WheelChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
  *
  * @example
  * ```svelte

package/dist/core/Binding.svelte.d.ts

@@ -109,10 +109,10 @@ export type BindingSlots<
  * Please consider convenience components like `<Slider>`, `<Color>`, etc. etc. before using this
  * component directly.
  *
- * @emits {BindingChangeEvent} change - When the value of `object[key]` changes. (This event is provided for advanced use cases. Prefer binding to `object`.)
- *
  * Usage outside of a `<Pane>` component will implicitly wrap the component in `<Pane
- * position='inline'>`.
+ * position="inline">`.
+ *
+ * @emits {BindingChangeEvent} change - When the value of `object[key]` changes. (This event is provided for advanced use cases. Prefer binding to `object`.)
  *
  * @example
  * ```svelte

package/dist/core/Blade.svelte.d.ts

@@ -69,7 +69,7 @@ export type BladeSlots<U extends BladeOptions, V extends BladeRef> = ReturnType<
  * directly.
  *
  * Usage outside of a `<Pane>` component will implicitly wrap the component in `<Pane
- * position='inline'>`.
+ * position="inline">`.
  *
  * Tweakpane's vanilla JS API offers Blades as as a way to create unbound components, but in Svelte the
  * same is achieved by simply not binding the component's value.

package/dist/core/Folder.svelte.d.ts

@@ -52,7 +52,7 @@ export type FolderSlots = typeof __propDef.slots;
  * May also be used to label and group multiple controls without user-collapsibility by setting
  * `userExpandable` to `false` and `expanded` to true.
  *
- * Usage outside of a `<Pane>` component will implicitly wrap the folder in `<Pane position='inline'>`.
+ * Usage outside of a `<Pane>` component will implicitly wrap the folder in `<Pane position="inline">`.
  *
  * @example
  * ```svelte

package/dist/core/Pane.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
 					/**
 					 * Text in the pane's title bar.
 					 * @default `Tweakpane`  \
-					 * Unless `position='inline'`, in which case the default is `undefined` and no title bar is
+					 * Unless `position="inline"`, in which case the default is `undefined` and no title bar is
 					 * shown.
 					 */
 					title?: string | undefined;
@@ -113,7 +113,7 @@ declare const __propDef: {
 				 */
 				collapseChildrenToFit?: boolean | undefined;
 				/**
-				 * Identifier to be used if multiple `<Pane position='draggable'>` components with
+				 * Identifier to be used if multiple `<Pane position="draggable">` components with
 				 * `storePositionLocally` set to true are used on the same page.
 				 * @default `'1'`
 				 */
@@ -176,7 +176,7 @@ declare const __propDef: {
 					/**
 					 * Text in the pane's title bar.
 					 * @default `Tweakpane`  \
-					 * Unless `position='inline'`, in which case the default is `undefined` and no title bar is
+					 * Unless `position="inline"`, in which case the default is `undefined` and no title bar is
 					 * shown.
 					 */
 					title?: string | undefined;
@@ -299,7 +299,7 @@ declare const __propDef: {
 					/**
 					 * Text in the pane's title bar.
 					 * @default `Tweakpane`  \
-					 * Unless `position='inline'`, in which case the default is `undefined` and no title bar is
+					 * Unless `position="inline"`, in which case the default is `undefined` and no title bar is
 					 * shown.
 					 */
 					title?: string | undefined;
@@ -439,7 +439,7 @@ export type PaneSlots = typeof __propDef.slots;
  *
  * Important: Unlike the vanilla JS Tweakpane API, wrapping components in a `<Pane>` is not mandatory.
  *
- * Pane-less components will be automatically nested in a `<Pane position='inline'>` component and
+ * Pane-less components will be automatically nested in a `<Pane position="inline">` component and
  * displayed in the regular block flow of the page. `<Pane>` is only necessary when you want to
  * explicitly group a number of components, or when you want convenient means to control how and where
  * the Tweakpane is shown on the page. (See an [important
@@ -455,7 +455,7 @@ export type PaneSlots = typeof __propDef.slots;
  *
  * Position mode overview:
  *
- * - **`<Pane position='draggable' ...>`**  \
+ * - **`<Pane position="draggable" ...>`**  \
  *   This is an extension of Tweakpane's core functionality, which reasonably considers pane dragging
  * outside of the library's scope. See discussion in Tweakpane issues
  * [#88](https://github.com/cocopon/tweakpane/issues/88) and
@@ -464,26 +464,26 @@ export type PaneSlots = typeof __propDef.slots;
  * By default, the pane's last position and width will be saved to the browser's local storage and
  * re-applied across page reloads. (Set the `storePositionLocally` prop to false to prevent this.)
  *     \
- * If multiple `<Pane position='draggable' ...>` components are used on the same page with
+ * If multiple `<Pane position="draggable" ...>` components are used on the same page with
  * `storePositionLocally` set to true, then each must have a unique `localStoreId` prop set to avoid
  * collisions.
  *     \
  * Double-clicking the width drag handle will expand or contract the pane between to its `minWidth`
  * and `maxWidth` sizes.
  *
- * - **`<Pane position='inline' ...>`**  \
+ * - **`<Pane position="inline" ...>`**  \
  *   Provides an inline version of the pane component, allowing the Tweakpane window to appear in the
  * normal flow of the document.
  *     \
  * All other _Svelte Tweakpane UI_ components which are created without a containing `<Pane>` are
- * nested implicitly inside a title-less `<Pane position='inline'>` component. As such, you do not
- * necessarily need create `<Pane position='inline'>` components in most cases.
+ * nested implicitly inside a title-less `<Pane position="inline">` component. As such, you do not
+ * necessarily need create `<Pane position="inline">` components in most cases.
  *     \
  * This mode's behavior is similar to creating a Pane in the vanilla JS Tweakpane with its
  * [`container`](https://tweakpane.github.io/docs/misc/#containerElement) property set to a specific
  * element where you want the Pane to appear.
  *
- * - **`<Pane position='fixed' ...>`**  \
+ * - **`<Pane position="fixed" ...>`**  \
  *   This mode uses the standard vanilla JS Tweakpane behavior of displaying in a fixed position over
  * the top-right of the page.
  *

package/dist/core/Separator.svelte.d.ts

@@ -67,7 +67,7 @@ export type SeparatorSlots = typeof __propDef.slots;
  * Wraps Tweakpane's [separator blade](https://tweakpane.github.io/docs/blades/#separator).
  *
  * Usage outside of a `<Pane>` component will implicitly wrap the separator in `<Pane
- * position='inline'>`.
+ * position="inline">`.
  *
  * @example
  * ```svelte

package/dist/core/TabGroup.svelte.d.ts

@@ -43,7 +43,7 @@ export type TabGroupSlots = typeof __propDef.slots;
  * changed to `TabGroup` in _Svelte Tweakpane UI_ to clarify it's relationship to the `<TabPage>`
  * component.
  *
- * Usage outside of a `<Pane>` component will implicitly wrap the tab in `<Pane position='inline'>`.
+ * Usage outside of a `<Pane>` component will implicitly wrap the tab in `<Pane position="inline">`.
  *
  * @example
  * ```svelte

package/dist/core/TabPage.svelte.d.ts

@@ -49,7 +49,7 @@ export type TabPageSlots = typeof __propDef.slots;
  * component.
  *
  * Usage outside of a `<TabGroup>` component wouldn't make much sense, but in such cases the
- * `<TabPage>` will be implicitly wrapped in a `<TabGroup>` and `<Pane position='inline'>`.
+ * `<TabPage>` will be implicitly wrapped in a `<TabGroup>` and `<Pane position="inline">`.
  *
  * @example
  * ```svelte

package/dist/extra/AutoObject.svelte.d.ts

@@ -62,7 +62,7 @@ export type AutoObjectSlots = typeof __propDef.slots;
  * shape of color or point objects will show a more specialized control.
  *
  * Usage outside of a `<Pane>` component will implicitly wrap the component in `<Pane
- * position='inline'>`.
+ * position="inline">`.
  *
  * `<AutoObject>` was inspired by the
  * [`<TWPAutoMutable>`](https://github.com/MrFoxPro/solid-tweakpane/blob/master/src/automutable.tsx)

package/dist/extra/Element.svelte.d.ts

@@ -103,13 +103,13 @@ export type ElementSlots = typeof __propDef.slots;
  *
  * In many cases, this component should not be necessary because _Svelte Tweakpane
  * UI_ already makes it easy to combine tweakpane components with other inline
- * elements simply by using stand-alone components or a `<Pane position='inline'>`
+ * elements simply by using stand-alone components or a `<Pane position="inline">`
  * component. `<Element>` should generally be the most useful when you're using
- * `<Pane position='draggable'>` or `<Pane position='fixed'>` and you want a custom
+ * `<Pane position="draggable">` or `<Pane position="fixed">` and you want a custom
  * element embedded in the pane.
  *
  * Usage outside of a `<Pane>` component doesn't make a ton of sense, but in such a
- * case the `<Element>` will be implicitly wrapped in `<Pane position='inline'>`.
+ * case the `<Element>` will be implicitly wrapped in `<Pane position="inline">`.
  *
  * @example
  * ```svelte

package/dist/internal/GenericPane.svelte

@@ -58,7 +58,7 @@
 		}
 	}
 	function syncFolded() {
-		if (tpPane) {
+		if (tpPane && tpPane.expanded !== _expanded) {
 			tpPane.expanded = _expanded;
 		}
 		expanded = _expanded;

package/dist/internal/GenericPane.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
 		/**
 		 * Text in the pane's title bar.
 		 * @default `Tweakpane`  \
-		 * Unless `position='inline'`, in which case the default is `undefined` and no title bar is
+		 * Unless `position="inline"`, in which case the default is `undefined` and no title bar is
 		 * shown.
 		 * */ title?: string | undefined;
 		/**

package/dist/internal/InternalMonitorBoolean.svelte.d.ts

@@ -130,7 +130,7 @@ export type InternalMonitorBooleanSlots = typeof __propDef.slots;
  * Note that `interval` is not exposed because updates are driven by reactive changes in the `value`.
  *
  * Usage outside of a `<Pane>` component will implicitly wrap the monitor in a `<Pane
- * position='inline'>` component.
+ * position="inline">` component.
  *
  * @example
  * ```svelte

package/dist/internal/InternalMonitorNumber.svelte.d.ts

@@ -152,7 +152,7 @@ export type InternalMonitorNumberSlots = typeof __propDef.slots;
  * the graph's update rate.
  *
  * Usage outside of a `<Pane>` component will implicitly wrap the monitor in a `<Pane
- * position='inline'>` component.
+ * position="inline">` component.
  *
  * @example
  * ```svelte

package/dist/internal/InternalMonitorString.svelte.d.ts

@@ -135,7 +135,7 @@ export type InternalMonitorStringSlots = typeof __propDef.slots;
  * Note that `interval` is not exposed because updates are driven by reactive changes in the `value`.
  *
  * Usage outside of a `<Pane>` component will implicitly wrap the monitor in a `<Pane
- * position='inline'>` component.
+ * position="inline">` component.
  *
  * @example
  * ```svelte

package/dist/internal/InternalPaneDraggable.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
 			/**
 			 * Text in the pane's title bar.
 			 * @default `Tweakpane`  \
-			 * Unless `position='inline'`, in which case the default is `undefined` and no title bar is
+			 * Unless `position="inline"`, in which case the default is `undefined` and no title bar is
 			 * shown.
 			 */
 			title?: string | undefined;
@@ -115,7 +115,7 @@ declare const __propDef: {
 		 * */
 		collapseChildrenToFit?: boolean | undefined;
 		/**
-		 * Identifier to be used if multiple `<Pane position='draggable'>` components with
+		 * Identifier to be used if multiple `<Pane position="draggable">` components with
 		 * `storePositionLocally` set to true are used on the same page.
 		 * @default `'1'`
 		 */

package/dist/internal/InternalPaneFixed.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
 			/**
 			 * Text in the pane's title bar.
 			 * @default `Tweakpane`  \
-			 * Unless `position='inline'`, in which case the default is `undefined` and no title bar is
+			 * Unless `position="inline"`, in which case the default is `undefined` and no title bar is
 			 * shown.
 			 */
 			title?: string | undefined;

package/dist/internal/InternalPaneInline.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
 		/**
 		 * Text in the pane's title bar.
 		 * @default `Tweakpane`  \
-		 * Unless `position='inline'`, in which case the default is `undefined` and no title bar is
+		 * Unless `position="inline"`, in which case the default is `undefined` and no title bar is
 		 * shown.
 		 */
 		title?: string | undefined;

package/dist/monitor/FpsGraph.svelte.d.ts

@@ -142,10 +142,10 @@ export type FpsGraphSlots = typeof __propDef.slots;
  * If you'd like to observe or visualize the frame rate data elsewhere, a `change` event is provided to
  * notify when the FPS value changes.
  *
- * @emits {number} change - When the FPS value changes.
- *
  * Usage outside of a `<Pane>` component will implicitly wrap the FPS graph in `<Pane
- * position='inline'>`.
+ * position="inline">`.
+ *
+ * @emits {number} change - When the FPS value changes.
  *
  * @example
  * ```svelte

package/dist/monitor/Monitor.svelte.d.ts

@@ -500,7 +500,7 @@ export type MonitorSlots<W extends number | string | boolean | unknown> = Return
  * See also the `<Waveform>` component for a more advanced number visualization.
  *
  * Usage outside of a `<Pane>` component will implicitly wrap the monitor in a `<Pane
- * position='inline'>` component.
+ * position="inline">` component.
  *
  * @example
  * ```svelte

package/dist/monitor/Profiler.svelte.d.ts

@@ -195,7 +195,7 @@ export type ProfilerSlots = typeof __propDef.slots;
  * See `<FpsGraph>` for a simpler alternative optimized for framerate visualization.
  *
  * Usage outside of a `<Pane>` component will implicitly wrap the profiler in `<Pane
- * position='inline'>`.
+ * position="inline">`.
  *
  * @example
  * ```svelte

package/dist/monitor/WaveformMonitor.svelte.d.ts

@@ -150,7 +150,7 @@ export type WaveformMonitorSlots = typeof __propDef.slots;
  * See `<Monitor>` component if you want to graph a single value's change over time.
  *
  * Usage outside of a `<Pane>` component will implicitly wrap the waveform monitor in `<Pane
- * position='inline'>`.
+ * position="inline">`.
  *
  * @example
  * ```svelte

package/dist/utils.js

@@ -68,9 +68,7 @@ export function enforceReadonly(
 		const componentString = componentName ? `<${componentName}> ` : '';
 		const propertyString = propertyName ? `property "${propertyName}" ` : '';
 		console.error(
-			`Svelte component "${componentString}" property "${propertyString}" is intended for readonly use.\nAssigning\n"${String(
-				external
-			)}"\nto\n"${String(internal)}"\nis not allowed.`
+			`Svelte component "${componentString}" property "${propertyString}" is intended for readonly use.\nAssigning\n"${String(external)}"\nto\n"${String(internal)}"\nis not allowed.`
 		);
 	}
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "svelte-tweakpane-ui",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "type": "module",
-  "description": "Wraps UI elements from Tweakpane in a collection of idiomatic Svelte components, and augments Tweakpane with a few extra features for your convenience and enjoyment.",
+  "description": "A Svelte component library wrapping UI elements from Tweakpane, plus some additional functionality for convenience and flexibility.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/kitschpatrol/svelte-tweakpane-ui.git"
@@ -18,6 +18,7 @@
     "url": "https://ericmika.com"
   },
   "license": "MIT",
+  "packageManager": "pnpm@8.15.5+sha256.4b4efa12490e5055d59b9b9fc9438b7d581a6b7af3b5675eb5c5f447cee1a589",
   "engines": {
     "node": ">=18.0.0",
     "pnpm": ">=8.0.0"
@@ -170,49 +171,49 @@
     "tweaks",
     "parameters",
     "gui",
-    "component",
     "svelte",
     "sveltekit",
     "tweakpane",
+    "ui-library",
     "svelte-ui",
-    "component-library",
+    "svelte-components",
     "ui-components",
-    "ui-framework",
-    "components-library"
+    "components-library",
+    "npm-package"
   ],
   "peerDependencies": {
     "svelte": "^4.0.0"
   },
   "dependencies": {
-    "@0b5vr/tweakpane-plugin-profiler": "^0.4.1",
-    "@0b5vr/tweakpane-plugin-rotation": "^0.2.0",
-    "@kitschpatrol/tweakpane-image-plugin": "^2.0.0",
-    "@pangenerator/tweakpane-textarea-plugin": "^2.0.0",
-    "@tweakpane/core": "^2.0.3",
-    "@tweakpane/plugin-camerakit": "^0.3.0",
-    "@tweakpane/plugin-essentials": "^0.2.1",
-    "esm-env": "^1.0.0",
-    "fast-copy": "^3.0.1",
-    "fast-equals": "^5.0.1",
-    "nanoid": "^5.0.6",
-    "svelte-local-storage-store": "^0.6.4",
-    "tweakpane": "^4.0.3",
-    "tweakpane-plugin-waveform": "^1.0.0"
+    "@0b5vr/tweakpane-plugin-profiler": "0.4.1",
+    "@0b5vr/tweakpane-plugin-rotation": "0.2.0",
+    "@kitschpatrol/tweakpane-image-plugin": "2.0.0",
+    "@pangenerator/tweakpane-textarea-plugin": "2.0.0",
+    "@tweakpane/core": "2.0.3",
+    "@tweakpane/plugin-camerakit": "0.3.0",
+    "@tweakpane/plugin-essentials": "0.2.1",
+    "esm-env": "1.0.0",
+    "fast-copy": "3.0.1",
+    "fast-equals": "5.0.1",
+    "nanoid": "5.0.6",
+    "svelte-local-storage-store": "0.6.4",
+    "tweakpane": "4.0.3",
+    "tweakpane-plugin-waveform": "1.0.0"
   },
   "devDependencies": {
-    "@kitschpatrol/shared-config": "^4.4.2",
+    "@kitschpatrol/shared-config": "^4.6.1",
     "@phenomnomnominal/tsquery": "^6.1.3",
-    "@playwright/test": "^1.41.2",
+    "@playwright/test": "^1.42.1",
     "@stkb/rewrap": "^0.1.0",
     "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.5.1",
-    "@sveltejs/package": "^2.2.7",
+    "@sveltejs/kit": "^2.5.4",
+    "@sveltejs/package": "^2.3.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "@types/eslint": "^8.56.3",
+    "@types/eslint": "^8.56.6",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^20.11.20",
-    "bumpp": "^9.3.0",
-    "eslint": "^8.56.0",
+    "@types/node": "^20.11.30",
+    "bumpp": "^9.4.0",
+    "eslint": "^8.57.0",
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "npm-run-all": "^4.1.5",
@@ -220,15 +221,15 @@
     "publint": "^0.2.7",
     "read-package-up": "^11.0.0",
     "svelte": "^4.2.12",
-    "svelte-check": "^3.6.4",
-    "svelte-language-server": "^0.16.3",
-    "svelte2tsx": "^0.7.1",
+    "svelte-check": "^3.6.8",
+    "svelte-language-server": "^0.16.6",
+    "svelte2tsx": "^0.7.5",
     "ts-morph": "^21.0.1",
     "tslib": "^2.6.2",
     "tsx": "^4.7.1",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.4",
-    "yaml": "^2.3.4"
+    "typescript": "~5.3.3",
+    "vite": "^5.2.3",
+    "yaml": "^2.4.1"
   },
   "scripts": {
     "build": "run-s --print-label build:*",

package/readme.md

@@ -6,11 +6,30 @@
 
 <!-- /title -->
 
-<!-- badges { npm: ["svelte-tweakpane-ui"], custom: { "Documentation": { image: "https://img.shields.io/badge/-documentation-ffdd00?logo=readthedocs&logoColor=222222", link: "https://kitschpatrol.com/svelte-tweakpane-ui" }}} -->
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="./assets/banner-dark.webp">
+  <img alt="Svelte Tweakpane UI Banner" src="./assets/banner-light.webp">
+</picture>
+
+<!-- badges {
+  npm: ["svelte-tweakpane-ui"],
+  custom: {
+    MadeWithSvelte: {
+      image: "https://madewithsvelte.com/storage/repo-shields/4860-shield.svg",
+      link: "https://madewithsvelte.com/p/svelte-tweakpane-ui/shield-link",
+    },
+    Documentation: {
+      image:
+        "https://img.shields.io/badge/-Documentation-ffdd00?logo=readthedocs&logoColor=222222",
+      link: "https://kitschpatrol.com/svelte-tweakpane-ui",
+    }
+  }
+} -->
 
 [![NPM Package svelte-tweakpane-ui](https://img.shields.io/npm/v/svelte-tweakpane-ui.svg)](https://npmjs.com/package/svelte-tweakpane-ui)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Documentation](https://img.shields.io/badge/-documentation-ffdd00?logo=readthedocs&logoColor=222222)](https://kitschpatrol.com/svelte-tweakpane-ui)
+[![MadeWithSvelte](https://madewithsvelte.com/storage/repo-shields/4860-shield.svg)](https://madewithsvelte.com/p/svelte-tweakpane-ui/shield-link)
+[![Documentation](https://img.shields.io/badge/-Documentation-ffdd00?logo=readthedocs&logoColor=222222)](https://kitschpatrol.com/svelte-tweakpane-ui)
 
 <!-- /badges -->