@x33025/sveltely 0.1.1 → 0.1.3

package/dist/components/Library/Popover/Popover.svelte

@@ -68,7 +68,7 @@
 		--sveltely-nested-inset: var(--popover-inset);
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
-		background: white;
+		background: var(--sveltely-background-color);
 		padding: var(--popover-inset);
 	}
 
@@ -77,13 +77,16 @@
 		align-items: center;
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
-		background: white;
-		color: var(--color-zinc-800);
+		background: var(--sveltely-background-color);
+		color: var(--sveltely-primary-color);
 		gap: var(--sveltely-gap);
 		padding: calc(var(--sveltely-padding-y) * 0.67) var(--sveltely-padding-x);
 		font-size: 0.875rem;
 		line-height: 1.25rem;
-		transition: color 150ms, border-color 150ms, background-color 150ms;
+		transition:
+			color 150ms,
+			border-color 150ms,
+			background-color 150ms;
 	}
 
 	:global(.popover-trigger[data-styled='true']:hover) {

package/dist/components/Library/ScrollView/ScrollView.svelte

@@ -1,27 +1,143 @@
 <script lang="ts">
+	import { tick } from 'svelte';
 	import type { Snippet } from 'svelte';
-	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+	import { surfaceStyle, type StyleProps } from '../../../style/surface';
+	import type { ScrollAxis } from '../../../style/scroll';
+
+	export type ScrollGeometry = {
+		axis: ScrollAxis;
+		offset: {
+			x: number;
+			y: number;
+		};
+		viewport: {
+			width: number;
+			height: number;
+		};
+		content: {
+			width: number;
+			height: number;
+		};
+		remaining: {
+			top: number;
+			right: number;
+			bottom: number;
+			left: number;
+		};
+		progress: {
+			x: number;
+			y: number;
+		};
+	};
 
 	type Props = {
 		children: Snippet;
 		viewport?: HTMLElement | null;
-		axis?: 'vertical' | 'horizontal' | 'both';
+		axis?: ScrollAxis;
 		contentStyles?: StyleProps;
-	};
+		onScroll?: (geometry: ScrollGeometry) => void;
+		scrollGradient?: boolean;
+		scrollGradientSize?: number | string;
+	} & StyleProps;
 
 	let {
 		children,
 		viewport = $bindable<HTMLElement | null>(null),
 		axis = 'vertical',
 		contentStyles = {},
-		...restProps
-	}: Props & StyleProps & Record<string, unknown> = $props();
+		onScroll,
+		scrollGradient = true,
+		scrollGradientSize = '1rem',
+		fontSize,
+		paddingX,
+		paddingY,
+		gap,
+		borderRadius,
+		inset,
+		background,
+		borderColor,
+		color
+	}: Props = $props();
 
-	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
-	const styleProps = $derived(extractedStyleProps.styleProps);
-	const props = $derived(extractedStyleProps.restProps);
+	const styleProps = $derived({
+		fontSize,
+		paddingX,
+		paddingY,
+		gap,
+		borderRadius,
+		inset,
+		background,
+		borderColor,
+		color
+	});
 	const viewportStyle = $derived.by(() => surfaceStyle(styleProps, 'scroll-view'));
 	const contentStyle = $derived.by(() => surfaceStyle(contentStyles, 'scroll-view-content'));
+	let canScrollToTop = $state(false);
+	let canScrollToBottom = $state(false);
+	const scrollGradientEnabled = $derived(scrollGradient && axis !== 'horizontal');
+	const scrollGradientStyle = $derived(
+		`--scroll-view-gradient-size: ${typeof scrollGradientSize === 'number' ? `${scrollGradientSize}rem` : scrollGradientSize};`
+	);
+
+	function syncScrollGradient(geometry: ScrollGeometry) {
+		if (!scrollGradientEnabled) return;
+		canScrollToTop = geometry.remaining.top > 0;
+		canScrollToBottom = geometry.remaining.bottom > 0;
+	}
+
+	function getScrollGeometry(node: HTMLElement): ScrollGeometry {
+		const maxX = Math.max(0, node.scrollWidth - node.clientWidth);
+		const maxY = Math.max(0, node.scrollHeight - node.clientHeight);
+		const x = node.scrollLeft;
+		const y = node.scrollTop;
+
+		return {
+			axis,
+			offset: { x, y },
+			viewport: {
+				width: node.clientWidth,
+				height: node.clientHeight
+			},
+			content: {
+				width: node.scrollWidth,
+				height: node.scrollHeight
+			},
+			remaining: {
+				top: y,
+				right: maxX - x,
+				bottom: maxY - y,
+				left: x
+			},
+			progress: {
+				x: maxX === 0 ? 1 : x / maxX,
+				y: maxY === 0 ? 1 : y / maxY
+			}
+		};
+	}
+
+	function handleScroll(event: Event) {
+		const geometry = getScrollGeometry(event.currentTarget as HTMLElement);
+		syncScrollGradient(geometry);
+		onScroll?.(geometry);
+	}
+
+	function handleWheel(event: WheelEvent) {
+		const node = event.currentTarget as HTMLElement;
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		if (axis !== 'horizontal') node.scrollTop += event.deltaY;
+		if (axis !== 'vertical') node.scrollLeft += event.deltaX;
+	}
+
+	$effect(() => {
+		if (!scrollGradientEnabled || !viewport) return;
+		void tick().then(() => {
+			if (!viewport) return;
+			syncScrollGradient(getScrollGeometry(viewport));
+		});
+	});
 </script>
 
 <div
@@ -30,12 +146,22 @@
 	class:scroll-view-vertical={axis === 'vertical'}
 	class:scroll-view-horizontal={axis === 'horizontal'}
 	class:scroll-view-both={axis === 'both'}
-	style={viewportStyle}
-	{...props}
+	class:scroll-view-gradient={scrollGradientEnabled}
+	class:scroll-view-can-scroll-up={canScrollToTop}
+	class:scroll-view-can-scroll-down={canScrollToBottom}
+	style={[viewportStyle, scrollGradientStyle].filter(Boolean).join(' ')}
+	onscroll={handleScroll}
+	onwheel={handleWheel}
 >
+	{#if scrollGradientEnabled}
+		<div class="scroll-view-gradient scroll-view-gradient-top"></div>
+	{/if}
 	<div class="scroll-view-content" style={contentStyle}>
 		{@render children()}
 	</div>
+	{#if scrollGradientEnabled}
+		<div class="scroll-view-gradient scroll-view-gradient-bottom"></div>
+	{/if}
 </div>
 
 <style>
@@ -49,6 +175,7 @@
 		color: var(--scroll-view-color, inherit);
 		scrollbar-gutter: stable;
 		overscroll-behavior: contain;
+		position: relative;
 	}
 
 	.scroll-view-vertical {
@@ -68,8 +195,7 @@
 	.scroll-view-content {
 		min-width: 100%;
 		min-height: 100%;
-		padding:
-			var(--scroll-view-content-padding-y, var(--sveltely-inset))
+		padding: var(--scroll-view-content-padding-y, var(--sveltely-inset))
 			var(--scroll-view-content-padding-x, var(--sveltely-inset));
 	}
 
@@ -86,4 +212,31 @@
 		width: max-content;
 		min-width: 100%;
 	}
+
+	.scroll-view-gradient {
+		position: sticky;
+		z-index: 2;
+		height: var(--scroll-view-gradient-size, 1rem);
+		flex: 0 0 var(--scroll-view-gradient-size, 1rem);
+		pointer-events: none;
+		opacity: 0;
+		transition: opacity 120ms ease;
+	}
+
+	.scroll-view-gradient-top {
+		top: 0;
+		margin-bottom: calc(var(--scroll-view-gradient-size, 1rem) * -1);
+		background: linear-gradient(to bottom, var(--scroll-view-background, white), transparent);
+	}
+
+	.scroll-view-gradient-bottom {
+		bottom: 0;
+		margin-top: calc(var(--scroll-view-gradient-size, 1rem) * -1);
+		background: linear-gradient(to top, var(--scroll-view-background, white), transparent);
+	}
+
+	.scroll-view-can-scroll-up .scroll-view-gradient-top,
+	.scroll-view-can-scroll-down .scroll-view-gradient-bottom {
+		opacity: 1;
+	}
 </style>

package/dist/components/Library/ScrollView/ScrollView.svelte.d.ts

@@ -1,12 +1,40 @@
 import type { Snippet } from 'svelte';
 import { type StyleProps } from '../../../style/surface';
+import type { ScrollAxis } from '../../../style/scroll';
+export type ScrollGeometry = {
+    axis: ScrollAxis;
+    offset: {
+        x: number;
+        y: number;
+    };
+    viewport: {
+        width: number;
+        height: number;
+    };
+    content: {
+        width: number;
+        height: number;
+    };
+    remaining: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    progress: {
+        x: number;
+        y: number;
+    };
+};
 type Props = {
     children: Snippet;
     viewport?: HTMLElement | null;
-    axis?: 'vertical' | 'horizontal' | 'both';
+    axis?: ScrollAxis;
     contentStyles?: StyleProps;
-};
-type $$ComponentProps = Props & StyleProps & Record<string, unknown>;
-declare const ScrollView: import("svelte").Component<$$ComponentProps, {}, "viewport">;
+    onScroll?: (geometry: ScrollGeometry) => void;
+    scrollGradient?: boolean;
+    scrollGradientSize?: number | string;
+} & StyleProps;
+declare const ScrollView: import("svelte").Component<Props, {}, "viewport">;
 type ScrollView = ReturnType<typeof ScrollView>;
 export default ScrollView;

package/dist/components/Library/ScrollView/index.d.ts

@@ -1 +1,2 @@
 export { default } from './ScrollView.svelte';
+export type { ScrollGeometry } from './ScrollView.svelte';

package/dist/components/Library/{SearchInput/SearchInput.demo.svelte → SearchField/SearchField.demo.svelte}

@@ -1,17 +1,17 @@
 <script module lang="ts">
 	export const demo = {
-		name: 'SearchInput',
+		name: 'SearchField',
 		description: 'Search field with icon, input, and optional confirmation hint.'
 	};
 </script>
 
 <script lang="ts">
-	import SearchInput from './SearchInput.svelte';
+	import SearchField from './SearchField.svelte';
 
 	let value = $state('');
 </script>
 
 <div class="vstack w-full max-w-sm gap-2">
-	<SearchInput bind:value placeholder="Search components..." />
-	<p class="text-xs text-zinc-500">Value: {value || 'empty'}</p>
+	<SearchField bind:value placeholder="Search components..." />
+	<p class="text-xs text-[var(--sveltely-secondary-color)]">Value: {value || 'empty'}</p>
 </div>

package/dist/components/Library/SearchField/SearchField.demo.svelte.d.ts

@@ -0,0 +1,8 @@
+export declare const demo: {
+    name: string;
+    description: string;
+};
+import SearchField from './SearchField.svelte';
+declare const SearchField: import("svelte").Component<Record<string, never>, {}, "">;
+type SearchField = ReturnType<typeof SearchField>;
+export default SearchField;

package/dist/components/Library/{SearchInput/SearchInput.svelte → SearchField/SearchField.svelte}

@@ -6,7 +6,8 @@
 	type Props = {
 		value?: string;
 		radiusSource?: boolean;
-	} & StyleProps & Omit<HTMLInputAttributes, 'children' | 'type' | 'value' | 'class' | 'style'>;
+	} & StyleProps &
+		Omit<HTMLInputAttributes, 'children' | 'type' | 'value' | 'class' | 'style'>;
 
 	let {
 		value = $bindable(''),
@@ -19,70 +20,65 @@
 	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
 	const props = $derived(extractedStyleProps.restProps);
-	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'search-input'));
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'search-field'));
 </script>
 
 <label
-	class="search-input"
+	class="search-field"
 	style={rootStyle}
 	data-disabled={disabled ? 'true' : 'false'}
 	data-popover-radius-source={radiusSource ? 'true' : undefined}
 >
-	<span class="search-input-icon" aria-hidden="true">
+	<span class="search-field-icon" aria-hidden="true">
 		<SearchIcon class="size-4" />
 	</span>
-	<input
-		type="search"
-		bind:value
-		{disabled}
-		{placeholder}
-		class="search-input-field"
-		{...props}
-	/>
+	<input type="search" bind:value {disabled} {placeholder} class="search-field-input" {...props} />
 </label>
 
 <style>
-	.search-input {
+	.search-field {
 		display: inline-flex;
 		width: 100%;
 		align-items: center;
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
-		background: white;
-		color: var(--color-zinc-900);
-		gap: var(--search-input-gap, calc(var(--sveltely-padding-x) * 0.67));
-		padding:
-			var(--search-input-padding-y, calc(var(--sveltely-padding-y) * 0.67))
-			var(--search-input-padding-x, var(--sveltely-padding-x))
-			var(--search-input-padding-y, calc(var(--sveltely-padding-y) * 0.67))
-			var(--search-input-padding-leading, calc(var(--sveltely-padding-y) * 0.67));
-		font-size: var(--search-input-font-size, 0.875rem);
+		background: var(--sveltely-background-color);
+		color: var(--sveltely-primary-color);
+		gap: var(--search-field-gap, calc(var(--sveltely-padding-x) * 0.67));
+		padding: var(--search-field-padding-y, calc(var(--sveltely-padding-y) * 0.67))
+			var(--search-field-padding-x, var(--sveltely-padding-x))
+			var(--search-field-padding-y, calc(var(--sveltely-padding-y) * 0.67))
+			var(--search-field-padding-leading, calc(var(--sveltely-padding-y) * 0.67));
+		font-size: var(--search-field-font-size, 0.875rem);
 		line-height: 1.25rem;
-		transition: color 150ms, border-color 150ms, background-color 150ms;
+		transition:
+			color 150ms,
+			border-color 150ms,
+			background-color 150ms;
 	}
 
-	.search-input:focus-within {
-		border-color: color-mix(in oklab, var(--sveltely-primary-color) 50%, white);
+	.search-field:focus-within {
+		border-color: color-mix(in oklab, var(--sveltely-active-color) 50%, white);
 	}
 
-	.search-input[data-disabled='true'] {
+	.search-field[data-disabled='true'] {
 		cursor: not-allowed;
 		opacity: 0.6;
 	}
 
-	.search-input-icon {
+	.search-field-icon {
 		flex-shrink: 0;
-		color: var(--color-zinc-500);
+		color: var(--sveltely-secondary-color);
 	}
 
-	.search-input-field {
+	.search-field-input {
 		min-width: 0;
 		flex: 1 1 auto;
 		background: transparent;
 		outline: none;
 	}
 
-	.search-input-field::-webkit-search-cancel-button {
+	.search-field-input::-webkit-search-cancel-button {
 		appearance: none;
 	}
 </style>

package/dist/components/Library/{SearchInput/SearchInput.svelte.d.ts → SearchField/SearchField.svelte.d.ts}

@@ -4,6 +4,6 @@ type Props = {
     value?: string;
     radiusSource?: boolean;
 } & StyleProps & Omit<HTMLInputAttributes, 'children' | 'type' | 'value' | 'class' | 'style'>;
-declare const SearchInput: import("svelte").Component<Props, {}, "value">;
-type SearchInput = ReturnType<typeof SearchInput>;
-export default SearchInput;
+declare const SearchField: import("svelte").Component<Props, {}, "value">;
+type SearchField = ReturnType<typeof SearchField>;
+export default SearchField;

package/dist/components/Library/SearchField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SearchField.svelte';

package/dist/components/Library/SearchField/index.js

@@ -0,0 +1 @@
+export { default } from './SearchField.svelte';

package/dist/components/Library/SegmentedPicker/SegmentedPicker.demo.svelte

@@ -19,5 +19,5 @@
 
 <div class="vstack center gap-2">
 	<SegmentedPicker {options} bind:value />
-	<p class="text-xs text-zinc-500">Selected: {value}</p>
+	<p class="text-xs text-[var(--sveltely-secondary-color)]">Selected: {value}</p>
 </div>

package/dist/components/Library/SegmentedPicker/SegmentedPicker.svelte

@@ -16,7 +16,8 @@
 		options: Option[];
 		value: string;
 		disabled?: boolean;
-	} & StyleProps & Record<string, unknown> = $props();
+	} & StyleProps &
+		Record<string, unknown> = $props();
 
 	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
@@ -65,7 +66,7 @@
 		--segmented-picker-scale: calc(var(--segmented-picker-font-size) / 0.875rem);
 		--sveltely-nested-inset: var(--segmented-picker-inset);
 		border-radius: var(--sveltely-border-radius);
-		background: var(--color-zinc-100);
+		background: var(--sveltely-inactive-color);
 		gap: var(--segmented-picker-inset);
 		font-size: var(--segmented-picker-font-size);
 		padding: var(--segmented-picker-inset);
@@ -79,8 +80,7 @@
 	.segmented-picker-button {
 		border-radius: var(--sveltely-border-radius-nested);
 		transition: background-color 150ms;
-		padding:
-			calc(var(--sveltely-padding-y) * 0.33 * var(--segmented-picker-scale))
+		padding: calc(var(--sveltely-padding-y) * 0.33 * var(--segmented-picker-scale))
 			calc(var(--sveltely-padding-x) * 0.83 * var(--segmented-picker-scale));
 	}
 
@@ -89,18 +89,18 @@
 	}
 
 	.segmented-picker-button-active {
-		background: var(--sveltely-primary-color);
-		color: white;
+		background: var(--sveltely-active-color);
+		color: var(--sveltely-background-color);
 	}
 
 	.segmented-picker-button-disabled {
 		cursor: not-allowed;
-		color: var(--color-zinc-400);
+		color: var(--sveltely-secondary-color);
 		pointer-events: none;
 	}
 
 	.segmented-picker-button-disabled-selected {
-		background: color-mix(in oklab, var(--sveltely-primary-color) 35%, white);
-		color: var(--color-zinc-400);
+		background: color-mix(in oklab, var(--sveltely-active-color) 35%, white);
+		color: var(--sveltely-secondary-color);
 	}
 </style>

package/dist/components/Library/Sheet/Sheet.demo.svelte

@@ -15,7 +15,7 @@
 	{/snippet}
 
 	<div class="vstack gap-3">
-		<p class="text-sm text-zinc-700">This is a simple sheet example.</p>
+		<p class="text-sm text-[var(--sveltely-primary-color)]">This is a simple sheet example.</p>
 		<div class="rounded border border-gray-200/70 p-3 text-sm text-gray-700">
 			<div>Panel one content.</div>
 			<div class="mt-2">Panel two content.</div>

package/dist/components/Library/Sheet/Sheet.svelte

@@ -2,7 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import { portalContent } from '../../../actions/portal';
 	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
-interface Props {
+	interface Props {
 		trigger?: Snippet;
 		open?: boolean;
 		label?: string;
@@ -87,13 +87,16 @@ interface Props {
 		align-items: center;
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
-		background: white;
-		color: var(--color-zinc-800);
+		background: var(--sveltely-background-color);
+		color: var(--sveltely-primary-color);
 		gap: var(--sveltely-gap);
 		padding: calc(var(--sveltely-padding-y) * 0.67) var(--sveltely-padding-x);
 		font-size: 0.875rem;
 		line-height: 1.25rem;
-		transition: color 150ms, border-color 150ms, background-color 150ms;
+		transition:
+			color 150ms,
+			border-color 150ms,
+			background-color 150ms;
 	}
 
 	.sheet-trigger:hover {
@@ -102,7 +105,7 @@ interface Props {
 
 	.sheet {
 		border-radius: var(--sveltely-border-radius);
-		background: white;
+		background: var(--sveltely-background-color);
 		padding: calc(var(--sveltely-padding-y) * 1.33) calc(var(--sveltely-padding-x) * 1.33);
 	}
 

package/dist/components/Library/Slider/Slider.demo.svelte

@@ -13,5 +13,5 @@
 
 <div class="vstack w-full max-w-sm gap-2">
 	<Slider bind:value min={0} max={100} />
-	<p class="text-xs text-zinc-500">Value: {value}</p>
+	<p class="text-xs text-[var(--sveltely-secondary-color)]">Value: {value}</p>
 </div>

package/dist/components/Library/Slider/Slider.svelte

@@ -14,7 +14,8 @@
 		max?: number;
 		step?: number | string;
 		disabled?: boolean;
-	} & StyleProps & Record<string, unknown> = $props();
+	} & StyleProps &
+		Record<string, unknown> = $props();
 
 	const extractedStyleProps = $derived.by(() => extractStyleProps(props));
 	const styleProps = $derived(extractedStyleProps.styleProps);
@@ -65,7 +66,7 @@
 	}
 
 	.slider:focus-visible {
-		outline: 2px solid color-mix(in oklab, var(--sveltely-primary-color) 35%, white);
+		outline: 2px solid color-mix(in oklab, var(--sveltely-active-color) 35%, white);
 		outline-offset: 4px;
 	}
 
@@ -79,10 +80,10 @@
 		border-radius: var(--sveltely-border-radius);
 		background: linear-gradient(
 			to right,
-			var(--sveltely-primary-color) 0%,
-			var(--sveltely-primary-color) var(--slider-pct),
-			var(--color-zinc-300) var(--slider-pct),
-			var(--color-zinc-300) 100%
+			var(--sveltely-active-color) 0%,
+			var(--sveltely-active-color) var(--slider-pct),
+			var(--sveltely-border-color) var(--slider-pct),
+			var(--sveltely-border-color) 100%
 		);
 	}
 
@@ -93,7 +94,7 @@
 		height: var(--slider-thumb-size);
 		border-radius: var(--sveltely-border-radius);
 		border: var(--slider-thumb-ring-width) solid var(--color-white);
-		background: var(--sveltely-primary-color);
+		background: var(--sveltely-active-color);
 		margin-top: calc((var(--slider-track-height) - var(--slider-thumb-size)) / 2);
 	}
 
@@ -101,14 +102,14 @@
 		height: var(--slider-track-height);
 		border: none;
 		border-radius: var(--sveltely-border-radius);
-		background: var(--color-zinc-300);
+		background: var(--sveltely-border-color);
 	}
 
 	.slider::-moz-range-progress {
 		height: var(--slider-track-height);
 		border: none;
 		border-radius: var(--sveltely-border-radius);
-		background: var(--sveltely-primary-color);
+		background: var(--sveltely-active-color);
 	}
 
 	.slider::-moz-range-thumb {
@@ -117,6 +118,6 @@
 		height: var(--slider-thumb-size);
 		border-radius: var(--sveltely-border-radius);
 		border: var(--slider-thumb-ring-width) solid var(--color-white);
-		background: var(--sveltely-primary-color);
+		background: var(--sveltely-active-color);
 	}
 </style>

package/dist/components/Library/Spacer/Spacer.svelte

@@ -0,0 +1,7 @@
+<div class="spacer"></div>
+
+<style>
+	.spacer {
+		flex: 1 1 auto;
+	}
+</style>

package/dist/components/Library/Spacer/Spacer.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Spacer;
+type Spacer = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Spacer: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}