svelte-tweakpane-ui 1.0.0

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

@@ -0,0 +1,170 @@
+import { SvelteComponent } from 'svelte';
+import type { BladeRef } from '../core/Blade.svelte';
+declare const __propDef: {
+	props: Omit<
+		{
+			/**
+			 * Blade configuration exposing Tweakpane's internal
+			 * [`BladeParams`](https://tweakpane.github.io/docs/api/interfaces/BaseBladeParams.html).
+			 *
+			 */
+			options: import('tweakpane').BaseBladeParams;
+			/**
+			 * Prevent interactivity and gray out the control.
+			 * @default `false`
+			 */
+			disabled?: boolean | 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
+			 * [`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.
+			 * @bindable
+			 * @readonly
+			 */
+			ref?: BladeRef | undefined;
+			/**
+			 * Imported Tweakpane `TpPluginBundle` (Aliased as `Plugin`) module to register before creating
+			 * the blade.
+			 *
+			 * 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;
+		},
+		'options' | 'disabled' | 'ref' | 'plugin'
+	> & {
+		/**
+		 * Maximum height of the element block, in pixels. By default, the element block will expand
+		 * vertically to fit its contents, but clip any horizontal excess.
+		 *
+		 * If a max height is set, it is used as the component height during SSR. If the actual
+		 * element content is less than the max, you will see CLS. If it is not set, the contents
+		 * are rendered... but keep in mind that style and other contextual changes during the
+		 * client render could result in CLS.
+		 * @default `undefined`  \
+		 * No max height.
+		 */
+		maxHeight?: number | undefined;
+		/**
+		 * Whether to reset the CSS of the element block to its default values. Avoids inheritance
+		 * of Tweakpane's CSS styles. Note that this uses a simple `all: initial;` rule.
+		 * @default `true`
+		 */
+		resetStyle?: boolean | undefined;
+	};
+	events: {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots: {
+		/**
+		 * Any HTML Element.
+		 */
+		default: {};
+	};
+};
+export type ElementProps = typeof __propDef.props;
+export type ElementEvents = typeof __propDef.events;
+export type ElementSlots = typeof __propDef.slots;
+/**
+ * A component for embedding arbitrary HTML elements into a pane.
+ *
+ * Any children wrapped in this component will be rendered into the pane. Any content larger than the
+ * pane in the horizontal axis will be clipped.
+ *
+ * Useful for quickly prototyping UIs, or adding content to a pane that's not easily represented by the
+ * built-in components.
+ *
+ * Think of this component as an escape hatch for getting something into the pane that you couldn't
+ * otherwise, but it's recommended to abstract new functionality for reuse by extending one of the
+ * internal component types in 'svelte-tweakpane-ui', or better yet by creating a new [Tweakpane
+ * Plugin](https://github.com/tweakpane/plugin-template).
+ *
+ * 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 not using a wrapping
+ * `<Pane>` component. It should generally be the most useful when you're using `<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'>`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import { Button, Element, Pane, Wheel } from 'svelte-tweakpane-ui';
+ *
+ * let gradientAngle = 45;
+ * let textAngle = 0;
+ * </script>
+ *
+ * <Pane position="inline" title="Element Demo">
+ * <Wheel
+ *   bind:value={gradientAngle}
+ *   format={(v) => `${(Math.abs(v) % 360).toFixed(0)}°`}
+ *   label="Gradient Angle"
+ *   pointerScale={-5}
+ * />
+ * <Wheel
+ *   bind:value={textAngle}
+ *   format={(v) => `${(Math.abs(v) % 360).toFixed(0)}°`}
+ *   label="Text Angle"
+ *   pointerScale={-2}
+ * />
+ * <Element>
+ *   <div class="demo" style:--a="{gradientAngle}deg">
+ *     <p style:rotate="{textAngle}deg">
+ *       <code>&lt;Pane&gt;</code><br />
+ *       <code>&lt;Element&gt;</code><br />
+ *       Whatever you want.<br />
+ *       <code>&lt;/Element&gt;</code><br />
+ *       <code>&lt;/Pane&gt;</code>
+ *     </p>
+ *   </div>
+ * </Element>
+ * <Button
+ *   on:click={() => {
+ *     gradientAngle = 45;
+ *     textAngle = 0;
+ *   }}
+ *   disabled={gradientAngle == 45 && textAngle == 0}
+ *   title="Reset"
+ * />
+ * </Pane>
+ *
+ * <style>
+ * .demo {
+ *   display: grid;
+ *   place-content: center;
+ *   aspect-ratio: 1;
+ *   width: 100%;
+ *   background: linear-gradient(var(--a), orange, magenta);
+ * }
+ *
+ * .demo > p {
+ *   font-family: sans-serif;
+ *   font-size: 1rem;
+ *   color: white;
+ *   text-align: center;
+ * }
+ *
+ * .demo > p > code {
+ *   color: white;
+ * }
+ * </style>
+ * ```
+ *
+ * @sourceLink
+ * [Element.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/extra/Element.svelte)
+ */
+export default class Element extends SvelteComponent<ElementProps, ElementEvents, ElementSlots> {}
+export {};

package/dist/index.d.ts

@@ -0,0 +1,94 @@
+export { type ButtonGridClickEvent, default as ButtonGrid } from './control/ButtonGrid.svelte';
+export { default as Checkbox } from './control/Checkbox.svelte';
+export {
+	type ColorValue,
+	type ColorValueRgbObject,
+	type ColorValueRgbTuple,
+	type ColorValueRgbaObject,
+	type ColorValueRgbaTuple,
+	type ColorValueString,
+	default as Color
+} from './control/Color.svelte';
+export {
+	type CubicBezierValue,
+	type CubicBezierValueObject,
+	type CubicBezierValueTuple,
+	default as CubicBezier
+} from './control/CubicBezier.svelte';
+export { type ImageValue, default as Image } from './control/Image.svelte';
+export {
+	type IntervalSliderValue,
+	type IntervalSliderValueObject,
+	type IntervalSliderValueTuple,
+	default as IntervalSlider
+} from './control/IntervalSlider.svelte';
+export {
+	type ListOptions,
+	type ListOptionsArray,
+	type ListOptionsObjectArray,
+	type ListOptionsRecord,
+	default as List
+} from './control/List.svelte';
+export {
+	type PointOptions,
+	type PointValue2d,
+	type PointValue2dObject,
+	type PointValue2dTuple,
+	type PointValue3d,
+	type PointValue3dObject,
+	type PointValue3dTuple,
+	type PointValue4d,
+	type PointValue4dObject,
+	type PointValue4dTuple,
+	default as Point
+} from './control/Point.svelte';
+export { default as RadioGrid } from './control/RadioGrid.svelte';
+export { type RingSeries, type RingUnit, default as Ring } from './control/Ring.svelte';
+export {
+	type RotationEulerOptions,
+	type RotationEulerOrder,
+	type RotationEulerUnit,
+	type RotationEulerValue,
+	type RotationEulerValueObject,
+	type RotationEulerValueTuple,
+	default as RotationEuler
+} from './control/RotationEuler.svelte';
+export {
+	type RotationQuaternionOptions,
+	type RotationQuaternionValue,
+	type RotationQuaternionValueObject,
+	type RotationQuaternionValueTuple,
+	default as RotationQuaternion
+} from './control/RotationQuaternion.svelte';
+export { default as Slider } from './control/Slider.svelte';
+export { default as Text } from './control/Text.svelte';
+export { default as Textarea } from './control/Textarea.svelte';
+export { default as Wheel } from './control/Wheel.svelte';
+export { type BindingOptions, type BindingRef, default as Binding } from './core/Binding.svelte';
+export { type BladeOptions, type BladeRef, default as Blade } from './core/Blade.svelte';
+export { type ButtonClickEvent, default as Button } from './core/Button.svelte';
+export { default as Folder } from './core/Folder.svelte';
+export { type PanePosition, default as Pane } from './core/Pane.svelte';
+export { default as Separator } from './core/Separator.svelte';
+export { default as TabGroup } from './core/TabGroup.svelte';
+export { default as TabPage } from './core/TabPage.svelte';
+export { default as AutoObject } from './extra/AutoObject.svelte';
+export { default as AutoValue } from './extra/AutoValue.svelte';
+export { default as Element } from './extra/Element.svelte';
+export { type FpsGraphChangeEvent, default as FpsGraph } from './monitor/FpsGraph.svelte';
+export { default as Monitor } from './monitor/Monitor.svelte';
+export {
+	type ProfilerCalcMode,
+	type ProfilerMeasure,
+	type ProfilerMeasureAsync,
+	type ProfilerMeasureHandler,
+	default as Profiler
+} from './monitor/Profiler.svelte';
+export {
+	type WaveformMonitorValue,
+	default as WaveformMonitor
+} from './monitor/WaveformMonitor.svelte';
+export type { Theme, ThemeColorValue } from './theme.js';
+export { default as ThemeUtils } from './theme.js';
+export type { BindingObject, Plugin } from './utils.js';
+export { default as Utils } from './utils.js';

package/dist/index.js

@@ -0,0 +1,39 @@
+// components
+// essentials (1st party plugins)
+export { default as ButtonGrid } from './control/ButtonGrid.svelte';
+export { default as Checkbox } from './control/Checkbox.svelte';
+export { default as Color } from './control/Color.svelte';
+export { default as CubicBezier } from './control/CubicBezier.svelte';
+// additional plugins (3rd party / community)
+export { default as Image } from './control/Image.svelte';
+export { default as IntervalSlider } from './control/IntervalSlider.svelte';
+export { default as List } from './control/List.svelte';
+export { default as Point } from './control/Point.svelte';
+export { default as RadioGrid } from './control/RadioGrid.svelte';
+// camerakit (1st party plugins)
+export { default as Ring } from './control/Ring.svelte';
+export { default as RotationEuler } from './control/RotationEuler.svelte';
+export { default as RotationQuaternion } from './control/RotationQuaternion.svelte';
+export { default as Slider } from './control/Slider.svelte';
+export { default as Text } from './control/Text.svelte';
+export { default as Textarea } from './control/Textarea.svelte';
+export { default as Wheel } from './control/Wheel.svelte';
+// core (tweakpane building blocks)
+export { default as Binding } from './core/Binding.svelte';
+export { default as Blade } from './core/Blade.svelte';
+export { default as Button } from './core/Button.svelte';
+export { default as Folder } from './core/Folder.svelte';
+export { default as Pane } from './core/Pane.svelte';
+export { default as Separator } from './core/Separator.svelte';
+export { default as TabGroup } from './core/TabGroup.svelte';
+export { default as TabPage } from './core/TabPage.svelte';
+// extra (svelte convenience components)
+export { default as AutoObject } from './extra/AutoObject.svelte';
+export { default as AutoValue } from './extra/AutoValue.svelte';
+export { default as Element } from './extra/Element.svelte';
+export { default as FpsGraph } from './monitor/FpsGraph.svelte';
+export { default as Monitor } from './monitor/Monitor.svelte';
+export { default as Profiler } from './monitor/Profiler.svelte';
+export { default as WaveformMonitor } from './monitor/WaveformMonitor.svelte';
+export { default as ThemeUtils } from './theme.js';
+export { default as Utils } from './utils.js';

package/dist/internal/ClsPad.svelte

@@ -0,0 +1,34 @@
+<script>
+	import { getValueOrFallback } from '../theme.js';
+	import { DEV } from 'esm-env';
+	export let theme = void 0;
+	export let keysAdd = [];
+	export let keysSubtract = [];
+	export let extra = void 0;
+	const showDebugBlocks = false;
+	function getRandomCssColor() {
+		return '#' + Math.floor(Math.random() * 16777215).toString(16);
+	}
+	function getPixelValue(s) {
+		return parseFloat(s.replace('px', ''));
+	}
+	function getTotal(add, sub, extra2 = 0) {
+		return (
+			add.reduce((acc, key) => {
+				return (acc += getPixelValue(getValueOrFallback(theme, key)));
+			}, 0) -
+			sub.reduce((acc, key) => {
+				return (acc += getPixelValue(getValueOrFallback(theme, key)));
+			}, 0) +
+			extra2
+		);
+	}
+	$: total = getTotal(keysAdd, keysSubtract, extra);
+</script>
+
+{#if total > 0}
+	<div
+		style:background={DEV && showDebugBlocks ? getRandomCssColor() : null}
+		style:height="{total}px"
+	/>
+{/if}

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

@@ -0,0 +1,95 @@
+import { SvelteComponent } from 'svelte';
+import { type Theme } from '../theme.js';
+declare const __propDef: {
+	props: {
+		/**
+		 * The theme to use when estimating the height of the pane.
+		 */ theme?: Theme | undefined;
+		/**
+		 * Theme keys to add to the height estimate.
+		 */ keysAdd?:
+			| (keyof {
+					baseBackgroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					baseBorderRadius?: string | undefined;
+					baseFontFamily?: string | undefined;
+					baseShadowColor?: import('../theme.js').ThemeColorValue | undefined;
+					bladeBorderRadius?: string | undefined;
+					bladeHorizontalPadding?: string | undefined;
+					bladeValueWidth?: string | undefined;
+					buttonBackgroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					buttonBackgroundColorActive?: import('../theme.js').ThemeColorValue | undefined;
+					buttonBackgroundColorFocus?: import('../theme.js').ThemeColorValue | undefined;
+					buttonBackgroundColorHover?: import('../theme.js').ThemeColorValue | undefined;
+					buttonForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					containerBackgroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					containerBackgroundColorActive?: import('../theme.js').ThemeColorValue | undefined;
+					containerBackgroundColorFocus?: import('../theme.js').ThemeColorValue | undefined;
+					containerBackgroundColorHover?: import('../theme.js').ThemeColorValue | undefined;
+					containerForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					containerHorizontalPadding?: string | undefined;
+					containerUnitSize?: string | undefined;
+					containerUnitSpacing?: string | undefined;
+					containerVerticalPadding?: string | undefined;
+					grooveForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					inputBackgroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					inputBackgroundColorActive?: import('../theme.js').ThemeColorValue | undefined;
+					inputBackgroundColorFocus?: import('../theme.js').ThemeColorValue | undefined;
+					inputBackgroundColorHover?: import('../theme.js').ThemeColorValue | undefined;
+					inputForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					labelForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					monitorBackgroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					monitorForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					pluginImageDraggingColor?: import('../theme.js').ThemeColorValue | undefined;
+			  })[]
+			| undefined;
+		/**
+		 * Theme keys to subtract from the height estimate.
+		 */ keysSubtract?:
+			| (keyof {
+					baseBackgroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					baseBorderRadius?: string | undefined;
+					baseFontFamily?: string | undefined;
+					baseShadowColor?: import('../theme.js').ThemeColorValue | undefined;
+					bladeBorderRadius?: string | undefined;
+					bladeHorizontalPadding?: string | undefined;
+					bladeValueWidth?: string | undefined;
+					buttonBackgroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					buttonBackgroundColorActive?: import('../theme.js').ThemeColorValue | undefined;
+					buttonBackgroundColorFocus?: import('../theme.js').ThemeColorValue | undefined;
+					buttonBackgroundColorHover?: import('../theme.js').ThemeColorValue | undefined;
+					buttonForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					containerBackgroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					containerBackgroundColorActive?: import('../theme.js').ThemeColorValue | undefined;
+					containerBackgroundColorFocus?: import('../theme.js').ThemeColorValue | undefined;
+					containerBackgroundColorHover?: import('../theme.js').ThemeColorValue | undefined;
+					containerForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					containerHorizontalPadding?: string | undefined;
+					containerUnitSize?: string | undefined;
+					containerUnitSpacing?: string | undefined;
+					containerVerticalPadding?: string | undefined;
+					grooveForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					inputBackgroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					inputBackgroundColorActive?: import('../theme.js').ThemeColorValue | undefined;
+					inputBackgroundColorFocus?: import('../theme.js').ThemeColorValue | undefined;
+					inputBackgroundColorHover?: import('../theme.js').ThemeColorValue | undefined;
+					inputForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					labelForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					monitorBackgroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					monitorForegroundColor?: import('../theme.js').ThemeColorValue | undefined;
+					pluginImageDraggingColor?: import('../theme.js').ThemeColorValue | undefined;
+			  })[]
+			| undefined;
+		/**
+		 * Extra arbitrary space to add to the height estimate, in pixels.
+		 */ extra?: number | undefined;
+	};
+	events: {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots: {};
+};
+export type ClsPadProps = typeof __propDef.props;
+export type ClsPadEvents = typeof __propDef.events;
+export type ClsPadSlots = typeof __propDef.slots;
+export default class ClsPad extends SvelteComponent<ClsPadProps, ClsPadEvents, ClsPadSlots> {}
+export {};

package/dist/internal/GenericBinding.svelte

@@ -0,0 +1,22 @@
+<script context="module"></script>
+
+<script
+	generics="T extends any, U extends BindingOptions = BindingOptions, V extends BindingRef = BindingRef"
+>
+	import Binding from '../core/Binding.svelte';
+	export let value;
+	export let ref = void 0;
+	export let options = void 0;
+	const key = Symbol('key');
+	function getValue() {
+		return value;
+	}
+	function setValue() {
+		object[key] = value;
+	}
+	$: object = { [key]: getValue() };
+	$: value = object[key];
+	$: value, setValue();
+</script>
+
+<Binding bind:object bind:ref {key} {options} {...$$restProps} />

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

@@ -0,0 +1,116 @@
+import { SvelteComponent } from 'svelte';
+import type { BindingOptions, BindingRef } from '../core/Binding.svelte';
+declare class __sveltets_Render<
+	T extends any,
+	U extends BindingOptions = BindingOptions,
+	V extends BindingRef = BindingRef
+> {
+	props(): Omit<
+		{
+			/**
+			 * The binding's target object with values to manipulate.
+			 * @bindable
+			 */
+			object: import('@tweakpane/core').Bindable & {
+				[x: string]: T;
+			};
+			/** The key for the value in the target `object` that the control should manipulate. */
+			key: string | number;
+			/**
+			 * 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?: U | 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 is primarily for internal use, when implementing convenience components wrapping
+			 * Binding's functionality.
+			 * @bindable
+			 * @readonly
+			 */
+			ref?: V | undefined;
+			/**
+			 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
+			 * the binding's containing `<Pane>`.
+			 *
+			 * 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;
+		},
+		'object' | 'key'
+	> & {
+		/**
+		 * The value to control.
+		 * @bindable
+		 * */
+		value: T;
+	};
+	events(): {} & {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots(): {};
+}
+export type GenericBindingProps<
+	T extends any,
+	U extends BindingOptions = BindingOptions,
+	V extends BindingRef = BindingRef
+> = ReturnType<__sveltets_Render<T, U, V>['props']>;
+export type GenericBindingEvents<
+	T extends any,
+	U extends BindingOptions = BindingOptions,
+	V extends BindingRef = BindingRef
+> = ReturnType<__sveltets_Render<T, U, V>['events']>;
+export type GenericBindingSlots<
+	T extends any,
+	U extends BindingOptions = BindingOptions,
+	V extends BindingRef = BindingRef
+> = ReturnType<__sveltets_Render<T, U, V>['slots']>;
+/**
+ * This component is for internal use only.
+ *
+ * It abstracts the `param` object Tweakpane expects into an interface that looks like a bare value.
+ *
+ * @sourceLink
+ * [GenericBinding.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/internal/GenericBinding.svelte)
+ */
+export default class GenericBinding<
+	T extends any,
+	U extends BindingOptions = BindingOptions,
+	V extends BindingRef = BindingRef
+> extends SvelteComponent<
+	GenericBindingProps<T, U, V>,
+	GenericBindingEvents<T, U, V>,
+	GenericBindingSlots<T, U, V>
+> {}
+export {};

package/dist/internal/GenericBladeFolding.svelte

@@ -0,0 +1,38 @@
+<script context="module"></script>
+
+<script generics="T extends BladeOptions, U extends BladeRef">
+	import Blade from '../core/Blade.svelte';
+	import { updateCollapsibility } from '../utils';
+	export let options;
+	export let ref = void 0;
+	export let userExpandable = true;
+	export let expanded = void 0;
+	export let buttonClass = '';
+	export let picker = void 0;
+	let gotBlade = false;
+	const initialExpanded = expanded;
+	let internalExpanded = initialExpanded;
+	$: if (!gotBlade && ref) {
+		gotBlade = true;
+		ref.controller?.valueController?.foldable_?.value('expanded').emitter.on('change', (e) => {
+			internalExpanded = e.rawValue;
+			expanded = internalExpanded;
+		});
+	}
+	$: options = {
+		...options,
+		expanded: initialExpanded,
+		// only set once
+		picker
+	};
+	$: ref &&
+		buttonClass !== void 0 &&
+		updateCollapsibility(userExpandable ?? true, ref.element, buttonClass);
+	$: ref &&
+		buttonClass !== void 0 &&
+		expanded !== internalExpanded &&
+		ref.element.getElementsByClassName(buttonClass).length > 0 &&
+		ref.element.getElementsByClassName(buttonClass)[0].click();
+</script>
+
+<Blade bind:ref {options} {...$$restProps} />