svelte-tweakpane-ui 1.0.0

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

@@ -0,0 +1,500 @@
+import { SvelteComponent } from 'svelte';
+export type PanePosition = 'draggable' | 'fixed' | 'inline';
+declare const __propDef: {
+	props: (
+		| (Omit<
+				{
+					/**
+					 * Text in the pane's title bar.
+					 * @default `Tweakpane`  \
+					 * Unless `position='inline'`, in which case the default is `undefined` and no title bar is
+					 * shown.
+					 */
+					title?: string | undefined;
+					/**
+					 * Allow users to interactively expand / contract the pane by clicking its title bar.
+					 *
+					 * Hides the collapse button from the title bar when `false`.
+					 * @default `true`
+					 */
+					userExpandable?: boolean | undefined;
+					/**
+					 * Expand or collapse the pane into its title bar.
+					 * @default `true`
+					 * @bindable
+					 */
+					expanded?: boolean | undefined;
+					/**
+					 * Custom color scheme.
+					 *
+					 * Applies to all child components, but note that setting a different `theme` on a child
+					 * component's prop will **not** override the parent pane's theme.
+					 *
+					 * Note that `<Pane position="inline' ...>` squares off rounded corners by default to better
+					 * integrate with surrounding content.
+					 *
+					 * Simply pass a custom or default theme like `ThemeUtils.presets.standard` if you want rounded
+					 * corners on an `inline` pane.
+					 *
+					 * See also the `setGlobalDefaultTheme()` for a way to set a custom default theme for all panes
+					 * on the page.
+					 * @default `undefined`  \
+					 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
+					 * set with `setGlobalDefaultTheme()`.
+					 */
+					theme?: import('..').Theme | undefined;
+					/**
+					 * Scales the pane's elements by a factor of `scale` to make it easier to see.
+					 *
+					 * Holds the width of the pane constant, so the pane will grow taller as it is scaled and will
+					 * continue to respect position- and size-related props. If you need more breathing room, set
+					 * the `width` property on the pane.
+					 *
+					 * Note that the scaling prop is only available on `<Pane>`, not on stand-alone (implicitly
+					 * wrapped) inline elements.
+					 *
+					 * Negative values are ignored.
+					 * @default `1`
+					 */
+					scale?: number | undefined;
+					/** Internal use only. */
+					userCreatedPane?: boolean | undefined;
+					/**
+					 * Internal use only.
+					 * @readonly
+					 */
+					paneRef?: import('tweakpane').Pane | undefined;
+				},
+				'userCreatedPane' | 'paneRef'
+		  > & {
+				/**
+				 * Horizontal position of the pane relative to the left edge of the window, in pixels.
+				 *
+				 * Not to be confused with the `position` prop which defines _how_, not _where_, the pane is
+				 * positioned on the page. (So-named because of its similarity to CSS `position` property.)
+				 * @default `undefined`  \
+				 * 8 pixels from the right edge of the window.
+				 */
+				x?: number | undefined;
+				/**
+				 * Vertical position of the pane relative to the top of the window, in pixels.
+				 *
+				 * Not to be confused with the `position` prop which defines _how_, not _where_, the pane is
+				 * positioned on the page. (So-named because of its similarity to CSS `position` property.)
+				 * @default `undefined`  \
+				 * 8 pixels from the top edge of the window.
+				 */
+				y?: number | undefined;
+				/**
+				 * Minimum pane width in pixels.
+				 * @default `200`
+				 */
+				minWidth?: number | undefined;
+				/**
+				 * Maximum pane width in pixels.
+				 * @default `600`
+				 */
+				maxWidth?: number | undefined;
+				/**
+				 * Automatically collapse open panels when the available window size is less than the height
+				 * of the pane.
+				 *
+				 * @default `false`
+				 */
+				collapseChildrenToFit?: boolean | undefined;
+				/**
+				 * Identifier to be used if multiple `<Pane position='draggable'>` components with
+				 * `storePositionLocally` set to true are used on the same page.
+				 * @default `'1'`
+				 */
+				localStoreId?: string | undefined;
+				/**
+				 * CSS [padding property string](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)
+				 * to apply to the draggable pane container to prevent it from being dragged all the way to
+				 * the edge of the window.
+				 *
+				 * Useful for keeping the pane away from of menu bars, etc.
+				 * @default `'0'`
+				 */
+				padding?: string | undefined;
+				/**
+				 * Allow the user to resize the width of the pane by dragging the right corner of the title
+				 * bar.
+				 * @default `true`
+				 */
+				resizable?: boolean | undefined;
+				/**
+				 * Store the pane's position and width when the user changes it interactively.
+				 *
+				 * Set the `localStoreId` prop if you have multiple draggable panes on the same page with
+				 * `storePositionLocally` set to `true`.
+				 * @default `true`
+				 */
+				storePositionLocally?: boolean | undefined;
+				/**
+				 * Width of the pane, in pixels.
+				 *
+				 * If undefined, the pane will fill the width of its container. (This behavior is unique to
+				 * `position="inline"`.)
+				 *
+				 * This value is particularly important in combination with `scale`, since a scaled inline
+				 * pane will grow indefinitely wider if an intrinsic width is not specified and a containing
+				 * element is not provided.
+				 * @default `undefined`
+				 */
+				width?: number | undefined;
+		  } & {
+				/**
+				 * Pane mode, one of three options:
+				 * - **'draggable'** *(default)*  \
+				 *   The pane is draggable and resizable, and may be placed anywhere over the page.
+				 * - **'inline'**  \
+				 *   The pane appears inline with other content in the normal flow of the document.  \
+				 *   This is the default mode for components created outside of an explicit `<Pane>`
+				 *   component.*
+				 * - **'fixed'** \
+				 *   Standard Tweakpane behavior where the pane is shown in a fixed position over the page.
+				 *
+				 *   Note that `<Pane>` is a dynamic component, and availability of additional props will
+				 *   vary depending on the defined `position` value.
+				 * @default `'draggable'`
+				 */
+				position?: 'draggable' | undefined;
+		  })
+		| (Omit<
+				{
+					/**
+					 * Text in the pane's title bar.
+					 * @default `Tweakpane`  \
+					 * Unless `position='inline'`, in which case the default is `undefined` and no title bar is
+					 * shown.
+					 */
+					title?: string | undefined;
+					/**
+					 * Allow users to interactively expand / contract the pane by clicking its title bar.
+					 *
+					 * Hides the collapse button from the title bar when `false`.
+					 * @default `true`
+					 */
+					userExpandable?: boolean | undefined;
+					/**
+					 * Expand or collapse the pane into its title bar.
+					 * @default `true`
+					 * @bindable
+					 */
+					expanded?: boolean | undefined;
+					/**
+					 * Custom color scheme.
+					 *
+					 * Applies to all child components, but note that setting a different `theme` on a child
+					 * component's prop will **not** override the parent pane's theme.
+					 *
+					 * Note that `<Pane position="inline' ...>` squares off rounded corners by default to better
+					 * integrate with surrounding content.
+					 *
+					 * Simply pass a custom or default theme like `ThemeUtils.presets.standard` if you want rounded
+					 * corners on an `inline` pane.
+					 *
+					 * See also the `setGlobalDefaultTheme()` for a way to set a custom default theme for all panes
+					 * on the page.
+					 * @default `undefined`  \
+					 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
+					 * set with `setGlobalDefaultTheme()`.
+					 */
+					theme?: import('..').Theme | undefined;
+					/**
+					 * Scales the pane's elements by a factor of `scale` to make it easier to see.
+					 *
+					 * Holds the width of the pane constant, so the pane will grow taller as it is scaled and will
+					 * continue to respect position- and size-related props. If you need more breathing room, set
+					 * the `width` property on the pane.
+					 *
+					 * Note that the scaling prop is only available on `<Pane>`, not on stand-alone (implicitly
+					 * wrapped) inline elements.
+					 *
+					 * Negative values are ignored.
+					 * @default `1`
+					 */
+					scale?: number | undefined;
+					/** Internal use only. */
+					userCreatedPane?: boolean | undefined;
+					/**
+					 * Internal use only.
+					 * @readonly
+					 */
+					paneRef?: import('tweakpane').Pane | undefined;
+				},
+				'userCreatedPane' | 'paneRef'
+		  > & {
+				/**
+				 * Horizontal position of the pane relative to the left edge of the window, in pixels.
+				 *
+				 * Not to be confused with the `position` prop which defines _how_, not _where_, the pane is
+				 * positioned on the page. (So-named because of its similarity to CSS `position` property.)
+				 * @default `undefined`  \
+				 * 8 pixels from the right edge of the window.
+				 */
+				x?: number | undefined;
+				/**
+				 * Vertical position of the pane relative to the top of the window, in pixels.
+				 *
+				 * Not to be confused with the `position` prop which defines _how_, not _where_, the pane is
+				 * positioned on the page. (So-named because of its similarity to CSS `position` property.)
+				 * @default `undefined`  \
+				 * 8 pixels from the top edge of the window.
+				 */
+				y?: number | undefined;
+				/**
+				 * Width of the pane, in pixels.
+				 *
+				 * If undefined, the pane will fill the width of its container. (This behavior is unique to
+				 * `position="inline"`.)
+				 *
+				 * This value is particularly important in combination with `scale`, since a scaled inline
+				 * pane will grow indefinitely wider if an intrinsic width is not specified and a containing
+				 * element is not provided.
+				 * @default `undefined`
+				 */
+				width?: number | undefined;
+		  } & {
+				/**
+				 * Pane mode, one of three options:
+				 * - **'draggable'** *(default)*  \
+				 *   The pane is draggable and resizable, and may be placed anywhere over the page.
+				 * - **'inline'**  \
+				 *   The pane appears inline with other content in the normal flow of the document.  \
+				 *   This is the default mode for components created outside of an explicit `<Pane>`
+				 *   component.*
+				 * - **'fixed'** \
+				 *   Standard Tweakpane behavior where the pane is shown in a fixed position over the page.
+				 *
+				 *   Note that `<Pane>` is a dynamic component, and availability of additional props will
+				 *   vary depending on the defined `position` value.
+				 * @default `'draggable'`
+				 */
+				position: 'fixed';
+		  })
+		| (Omit<
+				Omit<
+					{
+						/**
+						 * Text in the pane's title bar.
+						 * @default `Tweakpane`  \
+						 * Unless `position='inline'`, in which case the default is `undefined` and no title bar is
+						 * shown.
+						 */
+						title?: string | undefined;
+						/**
+						 * Allow users to interactively expand / contract the pane by clicking its title bar.
+						 *
+						 * Hides the collapse button from the title bar when `false`.
+						 * @default `true`
+						 */
+						userExpandable?: boolean | undefined;
+						/**
+						 * Expand or collapse the pane into its title bar.
+						 * @default `true`
+						 * @bindable
+						 */
+						expanded?: boolean | undefined;
+						/**
+						 * Custom color scheme.
+						 *
+						 * Applies to all child components, but note that setting a different `theme` on a child
+						 * component's prop will **not** override the parent pane's theme.
+						 *
+						 * Note that `<Pane position="inline' ...>` squares off rounded corners by default to better
+						 * integrate with surrounding content.
+						 *
+						 * Simply pass a custom or default theme like `ThemeUtils.presets.standard` if you want rounded
+						 * corners on an `inline` pane.
+						 *
+						 * See also the `setGlobalDefaultTheme()` for a way to set a custom default theme for all panes
+						 * on the page.
+						 * @default `undefined`  \
+						 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
+						 * set with `setGlobalDefaultTheme()`.
+						 */
+						theme?: import('..').Theme | undefined;
+						/**
+						 * Scales the pane's elements by a factor of `scale` to make it easier to see.
+						 *
+						 * Holds the width of the pane constant, so the pane will grow taller as it is scaled and will
+						 * continue to respect position- and size-related props. If you need more breathing room, set
+						 * the `width` property on the pane.
+						 *
+						 * Note that the scaling prop is only available on `<Pane>`, not on stand-alone (implicitly
+						 * wrapped) inline elements.
+						 *
+						 * Negative values are ignored.
+						 * @default `1`
+						 */
+						scale?: number | undefined;
+						/** Internal use only. */
+						userCreatedPane?: boolean | undefined;
+						/**
+						 * Internal use only.
+						 * @readonly
+						 */
+						paneRef?: import('tweakpane').Pane | undefined;
+					},
+					'paneRef'
+				> & {
+					/**
+					 * Width of the pane, in pixels.
+					 *
+					 * If undefined, the pane will fill the width of its container. (This behavior is unique to
+					 * `position="inline"`.)
+					 *
+					 * This value is particularly important in combination with `scale`, since a scaled inline
+					 * pane will grow indefinitely wider if an intrinsic width is not specified and a containing
+					 * element is not provided.
+					 * @default `undefined`
+					 */
+					width?: number | undefined;
+				},
+				'userCreatedPane'
+		  > & {
+				/**
+				 * Pane mode, one of three options:
+				 * - **'draggable'** *(default)*  \
+				 *   The pane is draggable and resizable, and may be placed anywhere over the page.
+				 * - **'inline'**  \
+				 *   The pane appears inline with other content in the normal flow of the document.  \
+				 *   This is the default mode for components created outside of an explicit `<Pane>`
+				 *   component.*
+				 * - **'fixed'** \
+				 *   Standard Tweakpane behavior where the pane is shown in a fixed position over the page.
+				 *
+				 *   Note that `<Pane>` is a dynamic component, and availability of additional props will
+				 *   vary depending on the defined `position` value.
+				 * @default `'draggable'`
+				 */
+				position: 'inline';
+		  })
+	) & {
+		/**
+		 * Pane mode, one of three options:
+		 * - **'draggable'** *(default)*  \
+		 *   The pane is draggable and resizable, and may be placed anywhere over the page.
+		 * - **'inline'**  \
+		 *   The pane appears inline with other content in the normal flow of the document.  \
+		 *   This is the default mode for components created outside of an explicit `<Pane>`
+		 *   component.*
+		 * - **'fixed'** \
+		 *   Standard Tweakpane behavior where the pane is shown in a fixed position over the page.
+		 *
+		 *   Note that `<Pane>` is a dynamic component, and availability of additional props will
+		 *   vary depending on the defined `position` value.
+		 * @default `'draggable'`
+		 * */
+		position?: PanePosition | undefined;
+	};
+	events: {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots: {
+		/**
+		 * Any Tweakpane component, except another `<Pane>`.
+		 */
+		default: {};
+	};
+};
+export type PaneProps = typeof __propDef.props;
+export type PaneEvents = typeof __propDef.events;
+export type PaneSlots = typeof __propDef.slots;
+/**
+ * The root `<Pane>` component, used for organizing controls into a single group and controlling how
+ * and where the Tweakpane is displayed.
+ *
+ * This component is a wrapper around Tweakpane's
+ * [`Pane`](https://tweakpane.github.io/docs/api/classes/Pane.html) class.
+ *
+ * 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
+ * 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
+ * exception](https://kitschpatrol.com/svelte-tweakpane-ui/docs#island-framework-compatibility)
+ * regarding _Svelte Tweakpane UI_ in island frameworks like Astro.)
+ *
+ *
+ * Multiple `<Pane>` components of different modes may be added to a single page. If the panes are in
+ * `fixed` or `draggable` mode, you might want to set the `x` or `y` properties to prevent overlap.
+ *
+ * Note that `<Pane>` is a dynamic component, and availability of additional props will vary depending
+ * on the defined `position` value.
+ *
+ * Position mode overview:
+ *
+ * - **`<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
+ * [#301](https://github.com/cocopon/tweakpane/issues/301).
+ *     \
+ * 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
+ * `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' ...>`**  \
+ *   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.
+ *     \
+ * 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' ...>`**  \
+ *   This mode uses the standard vanilla JS Tweakpane behavior of displaying in a fixed position over
+ * the top-right of the page.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import { Pane, type PanePosition, RadioGrid } from 'svelte-tweakpane-ui';
+ *
+ * const options: PanePosition[] = ['inline', 'fixed', 'draggable'];
+ * let position: PanePosition = options[0];
+ * </script>
+ *
+ * <Pane {position} title="Pane" y={position === 'inline' ? undefined : 110}>
+ * <RadioGrid
+ *   bind:value={position}
+ *   columns={1}
+ *   label="Pane Position Prop"
+ *   values={options}
+ * />
+ * </Pane>
+ * {#if position === 'fixed'}
+ * <p>Pane is fixed at the top-right of the page.</p>
+ * {:else if position === 'draggable'}
+ * <p>Pane is draggable at the top-right of the page.</p>
+ * {/if}
+ *
+ * <style>
+ * p {
+ *   display: grid;
+ *   place-content: center;
+ *   width: 100%;
+ *   height: 96px;
+ * }
+ * </style>
+ * ```
+ *
+ * @sourceLink
+ * [Pane.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/core/Pane.svelte)
+ */
+export default class Pane extends SvelteComponent<PaneProps, PaneEvents, PaneSlots> {}
+export {};

package/dist/core/Separator.svelte

@@ -0,0 +1,14 @@
+<script>
+	import Blade from './Blade.svelte';
+	import ClsPad from '../internal/ClsPad.svelte';
+	import { BROWSER } from 'esm-env';
+	const options = {
+		view: 'separator'
+	};
+</script>
+
+{#if BROWSER}
+	<Blade {options} {...$$restProps} />
+{:else}
+	<ClsPad extra={2} keysAdd={['containerVerticalPadding']} theme={$$props.theme} />
+{/if}

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

@@ -0,0 +1,85 @@
+import { SvelteComponent } from 'svelte';
+import type {
+	SeparatorBladeApi as SeparatorBladeRef,
+	SeparatorBladeParams as SeparatorOptions
+} from 'tweakpane';
+declare const __propDef: {
+	props: Omit<
+		{
+			/**
+			 * Blade configuration exposing Tweakpane's internal
+			 * [`BladeParams`](https://tweakpane.github.io/docs/api/interfaces/BaseBladeParams.html).
+			 *
+			 */
+			options: SeparatorOptions;
+			/**
+			 * 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?: SeparatorBladeRef | 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' | 'ref' | 'plugin'
+	>;
+	events: {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots: {};
+};
+export type SeparatorProps = typeof __propDef.props;
+export type SeparatorEvents = typeof __propDef.events;
+export type SeparatorSlots = typeof __propDef.slots;
+/**
+ * A convenience component providing a subtle visual separator between controls, in the spirit of the
+ * HTML `<hr>` element.
+ *
+ * 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'>`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import { Button, Separator } from 'svelte-tweakpane-ui';
+ * </script>
+ *
+ * <Button title="Oil" />
+ * <Separator />
+ * <Button title="Water" />
+ * ```
+ *
+ * @sourceLink
+ * [Separator.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/core/Separator.svelte)
+ */
+export default class Separator extends SvelteComponent<
+	SeparatorProps,
+	SeparatorEvents,
+	SeparatorSlots
+> {}
+export {};

package/dist/core/TabGroup.svelte

@@ -0,0 +1,64 @@
+<script>
+	import ClsPad from '../internal/ClsPad.svelte';
+	import InternalPaneInline from '../internal/InternalPaneInline.svelte';
+	import { getElementIndex, isRootPane } from '../utils.js';
+	import { BROWSER } from 'esm-env';
+	import { getContext, onDestroy, onMount, setContext } from 'svelte';
+	import { writable } from 'svelte/store';
+	export let disabled = false;
+	export let selectedIndex = 0;
+	export let theme = void 0;
+	const parentStore = getContext('parentStore');
+	const tabGroupStore = writable();
+	setContext('tabGroupStore', tabGroupStore);
+	const tabIndexStore = writable();
+	setContext('tabIndexStore', tabIndexStore);
+	const userCreatedPane = getContext('userCreatedPane');
+	let indexElement;
+	onMount(() => {
+		$tabIndexStore = userCreatedPane ? getElementIndex(indexElement) : 0;
+	});
+	onDestroy(() => {
+		$tabGroupStore?.dispose();
+	});
+	function setUpListeners(t) {
+		t?.on('select', (e) => {
+			selectedIndex = e.index;
+		});
+	}
+	function setSelectedIndex(index) {
+		const tabPageApi = $tabGroupStore?.pages.at(index);
+		if (tabPageApi) {
+			if (!tabPageApi.selected) tabPageApi.selected = true;
+		}
+	}
+	$: BROWSER && setUpListeners($tabGroupStore);
+	$: BROWSER && setSelectedIndex(selectedIndex);
+	$: BROWSER && $tabGroupStore && ($tabGroupStore.disabled = disabled);
+	$: BROWSER &&
+		theme &&
+		$parentStore &&
+		(userCreatedPane || !isRootPane($parentStore)) &&
+		console.warn(
+			'Set theme on the <Pane> component, not on its children! (Check nested <TabGroup> components for a theme prop.)'
+		);
+</script>
+
+{#if parentStore}
+	{#if BROWSER}
+		<div bind:this={indexElement} style="display: none;">
+			<slot />
+		</div>
+	{:else}
+		<ClsPad keysAdd={['containerVerticalPadding', 'containerVerticalPadding']} {theme} />
+		<div>
+			<slot />
+		</div>
+	{/if}
+{:else}
+	<InternalPaneInline {theme} userCreatedPane={false}>
+		<svelte:self bind:selectedIndex {disabled}>
+			<slot />
+		</svelte:self>
+	</InternalPaneInline>
+{/if}