@x33025/sveltely 0.1.23 → 0.1.25

package/dist/components/Library/Notifications/Notifications.svelte

@@ -0,0 +1,155 @@
+<script lang="ts" generics="TItem extends NotificationItem = NotificationItem">
+	import type { Snippet } from 'svelte';
+	import { flip } from 'svelte/animate';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { fade, fly } from 'svelte/transition';
+	import { extractLayoutProps, layoutStyle, type LayoutProps } from '../../../style/layout';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+	import type { NotificationItem } from './types';
+
+	type Props = {
+		items?: TItem[];
+		children?: Snippet<[TItem, number]>;
+		empty?: Snippet;
+		key?: (item: TItem, index: number) => string | number;
+		animationDuration?: number;
+	} & LayoutProps &
+		StyleProps &
+		Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'style'>;
+
+	let {
+		items = $bindable<TItem[]>([]),
+		children,
+		empty,
+		key,
+		animationDuration = 180,
+		...restProps
+	}: Props = $props();
+
+	const extractedLayoutProps = $derived.by(() => extractLayoutProps(restProps));
+	const layoutProps = $derived(extractedLayoutProps.layoutProps);
+	const afterLayoutProps = $derived(extractedLayoutProps.restProps);
+	const extractedStyleProps = $derived.by(() => extractStyleProps(afterLayoutProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const forwardedProps = $derived(extractedStyleProps.restProps);
+	const rootStyle = $derived.by(() =>
+		[layoutStyle(layoutProps), surfaceStyle(styleProps, 'notifications')].filter(Boolean).join(' ')
+	);
+
+	function itemKey(item: TItem, index: number) {
+		return key?.(item, index) ?? item.id ?? index;
+	}
+
+	function itemTitle(item: TItem) {
+		return item.title ?? String(item.id ?? 'Notification');
+	}
+
+	function itemMessage(item: TItem) {
+		return item.message ?? item.description ?? '';
+	}
+</script>
+
+<div class="notifications" style={rootStyle} {...forwardedProps}>
+	{#each items as item, index (itemKey(item, index))}
+		<div
+			class="notification"
+			data-tone={item.tone ?? 'default'}
+			in:fly={{ y: -8, duration: animationDuration }}
+			out:fade={{ duration: animationDuration * 0.75 }}
+			animate:flip={{ duration: animationDuration }}
+		>
+			{#if children}
+				{@render children(item, index)}
+			{:else}
+				<p class="notification-title">{itemTitle(item)}</p>
+				{#if itemMessage(item)}
+					<p class="notification-message">{itemMessage(item)}</p>
+				{/if}
+			{/if}
+		</div>
+	{:else}
+		{#if empty}
+		<div class="notifications-empty">
+			{@render empty()}
+		</div>
+		{/if}
+	{/each}
+</div>
+
+<style>
+	.notifications {
+		--notifications-font-size: var(--sveltely-font-size);
+		--notifications-padding-x: 0px;
+		--notifications-padding-y: 0px;
+		--notifications-gap: var(--sveltely-gap);
+		--notifications-border-radius: var(--sveltely-border-radius);
+		display: inline-flex;
+		min-width: 0;
+		min-height: 0;
+		flex-direction: column;
+		align-items: stretch;
+		gap: var(--notifications-gap);
+		border-radius: var(--notifications-border-radius);
+		padding: var(--notifications-padding-y) var(--notifications-padding-x);
+		font-size: var(--notifications-font-size);
+	}
+
+	.notification {
+		position: relative;
+		min-width: min(100%, 16rem);
+		border: 1px solid var(--sveltely-border-color);
+		border-radius: var(--sveltely-border-radius);
+		background: var(--sveltely-background-color);
+		box-shadow: var(--sveltely-shadow);
+		color: var(--sveltely-text-primary-color);
+		padding: calc(var(--sveltely-padding-y) * 0.83) var(--sveltely-padding-x);
+		overflow: hidden;
+	}
+
+	.notification::before {
+		position: absolute;
+		inset-block: 0;
+		inset-inline-start: 0;
+		width: 3px;
+		background: var(--notification-accent, var(--sveltely-control-active-color));
+		content: '';
+	}
+
+	.notification[data-tone='info'] {
+		--notification-accent: #2563eb;
+	}
+
+	.notification[data-tone='success'] {
+		--notification-accent: #16a34a;
+	}
+
+	.notification[data-tone='warning'] {
+		--notification-accent: #d97706;
+	}
+
+	.notification[data-tone='danger'] {
+		--notification-accent: #dc2626;
+	}
+
+	.notification-title,
+	.notification-message {
+		margin: 0;
+	}
+
+	.notification-title {
+		font-weight: 600;
+		line-height: 1.35;
+	}
+
+	.notification-message {
+		margin-top: 0.125rem;
+		color: var(--sveltely-text-secondary-color);
+		font-size: 0.875em;
+		line-height: 1.45;
+	}
+
+	.notifications-empty {
+		color: var(--sveltely-text-secondary-color);
+		font-size: 0.875em;
+	}
+</style>

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

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type LayoutProps } from '../../../style/layout';
+import { type StyleProps } from '../../../style/surface';
+import type { NotificationItem } from './types';
+declare function $$render<TItem extends NotificationItem = NotificationItem>(): {
+    props: {
+        items?: TItem[];
+        children?: Snippet<[TItem, number]>;
+        empty?: Snippet;
+        key?: (item: TItem, index: number) => string | number;
+        animationDuration?: number;
+    } & LayoutProps & StyleProps & Omit<HTMLAttributes<HTMLDivElement>, "style" | "class" | "children">;
+    exports: {};
+    bindings: "items";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TItem extends NotificationItem = NotificationItem> {
+    props(): ReturnType<typeof $$render<TItem>>['props'];
+    events(): ReturnType<typeof $$render<TItem>>['events'];
+    slots(): ReturnType<typeof $$render<TItem>>['slots'];
+    bindings(): "items";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TItem extends NotificationItem = NotificationItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TItem>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TItem>['props']>, ReturnType<__sveltets_Render<TItem>['events']>, ReturnType<__sveltets_Render<TItem>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TItem>['bindings']>;
+    } & ReturnType<__sveltets_Render<TItem>['exports']>;
+    <TItem extends NotificationItem = NotificationItem>(internal: unknown, props: ReturnType<__sveltets_Render<TItem>['props']> & {}): ReturnType<__sveltets_Render<TItem>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Notifications: $$IsomorphicComponent;
+type Notifications<TItem extends NotificationItem = NotificationItem> = InstanceType<typeof Notifications<TItem>>;
+export default Notifications;

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

@@ -0,0 +1,2 @@
+export { default } from './Notifications.svelte';
+export type { NotificationItem, NotificationTone } from './types';

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

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

package/dist/components/Library/Notifications/types.d.ts

@@ -0,0 +1,8 @@
+export type NotificationTone = 'default' | 'info' | 'success' | 'warning' | 'danger';
+export type NotificationItem = {
+    id?: string | number;
+    title?: string;
+    message?: string;
+    description?: string;
+    tone?: NotificationTone;
+};

package/dist/components/Library/Notifications/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Library/NumberField/NumberField.svelte

@@ -120,25 +120,27 @@
 	data-disabled={disabled ? 'true' : 'false'}
 	data-error={error ? 'true' : 'false'}
 >
-	<input
-		value={draftValue}
-		type="number"
-		{disabled}
-		{name}
-		{autocomplete}
-		{required}
-		{readonly}
-		{inputmode}
-		{placeholder}
-		{min}
-		{max}
-		{step}
-		aria-invalid={error ? 'true' : undefined}
-		aria-describedby={describedBy}
-		class="text-field-input"
-		oninput={handleInput}
-		onblur={handleBlur}
-	/>
+	<div class="text-field-control">
+		<input
+			value={draftValue}
+			type="number"
+			{disabled}
+			{name}
+			{autocomplete}
+			{required}
+			{readonly}
+			{inputmode}
+			{placeholder}
+			{min}
+			{max}
+			{step}
+			aria-invalid={error ? 'true' : undefined}
+			aria-describedby={describedBy}
+			class="text-field-input"
+			oninput={handleInput}
+			onblur={handleBlur}
+		/>
+	</div>
 
 	{#if help}
 		<span id="text-field-message" class="text-field-message">{help}</span>
@@ -156,6 +158,10 @@
 		font-size: var(--text-field-font-size, var(--sveltely-font-size));
 	}
 
+	.text-field-control {
+		display: contents;
+	}
+
 	.text-field-input {
 		width: 100%;
 		min-width: 0;

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

@@ -7,6 +7,7 @@
 </script>
 
 <script lang="ts">
+	import HStack from '../HStack';
 	import Pagination from './Pagination.svelte';
 
 	let data = $state({
@@ -21,6 +22,6 @@
 	};
 </script>
 
-<div class="w-fit">
+<HStack>
 	<Pagination {data} showFirstLast={true} onPageChange={(page) => onPageChange(page)} />
-</div>
+</HStack>

package/dist/components/Library/Pagination/Pagination.svelte

@@ -157,9 +157,8 @@
 	.pagination {
 		--pagination-font-size: calc(var(--sveltely-font-size) * 0.875);
 		--pagination-scale: calc(var(--pagination-font-size) / 0.875rem);
-		--pagination-icon-size: calc(var(--pagination-font-size) * 1.143);
+		--pagination-icon-size: calc(var(--pagination-font-size) * 0.95);
 		--pagination-gap: calc(var(--sveltely-gap) * 2);
-		--pagination-icon-shift: calc(var(--sveltely-gap) / 2);
 		display: inline-flex;
 		width: fit-content;
 		gap: var(--pagination-gap);
@@ -173,18 +172,12 @@
 	}
 
 	.pagination-icon {
+		display: block;
+		flex: 0 0 auto;
 		width: var(--pagination-icon-size);
 		height: var(--pagination-icon-size);
 	}
 
-	.pagination-icon-backward {
-		transform: translateX(calc(var(--pagination-icon-shift) * -1));
-	}
-
-	.pagination-icon-forward {
-		transform: translateX(var(--pagination-icon-shift));
-	}
-
 	.pagination-button {
 		border-radius: var(--sveltely-border-radius);
 		background: var(--sveltely-control-inactive-color);
@@ -193,14 +186,9 @@
 	}
 
 	.pagination-button-icon {
-		padding: calc(var(--sveltely-padding-y) * 0.67 * var(--pagination-scale))
-			calc(var(--sveltely-padding-x) * 0.67 * var(--pagination-scale));
-		min-width: calc(
-			(var(--sveltely-padding-x) * 1.34 * var(--pagination-scale)) + var(--pagination-icon-size)
-		);
-		min-height: calc(
-			(var(--sveltely-padding-y) * 1.34 * var(--pagination-scale)) + var(--pagination-icon-size)
-		);
+		width: calc(var(--pagination-icon-size) + var(--sveltely-padding-x) * var(--pagination-scale));
+		height: calc(var(--pagination-icon-size) + var(--sveltely-padding-y) * var(--pagination-scale));
+		padding: 0;
 	}
 
 	.pagination-button:disabled {

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { portalContent } from '../../../actions/portal';
+	import { Content as PortalContent } from '../Portal';
 	import { getOpenPopoverIds, getParentId } from './registry.svelte';
 
 	type Point = { x: number; y: number };
@@ -96,7 +96,7 @@
 </script>
 
 {#if geometries.length > 0}
-	<div use:portalContent class="pointer-events-none fixed inset-0 z-[9999]">
+	<PortalContent class="pointer-events-none fixed inset-0 z-[9999]">
 		<svg width="100%" height="100%" aria-hidden="true">
 			{#each geometries as geo (geo.id)}
 				<!-- Safe polygon (rendered first so rects draw over it) -->
@@ -159,5 +159,5 @@
 				</text>
 			{/each}
 		</svg>
-	</div>
+	</PortalContent>
 {/if}

package/dist/components/Library/Portal/Content.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { portalContent } from '../../../actions/portal';
+
+	type Props = {
+		id?: string;
+		children?: Snippet;
+		element?: HTMLElement | null;
+	} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+
+	let { id = 'default', children, element = $bindable<HTMLElement | null>(null), ...props }: Props =
+		$props();
+</script>
+
+<div bind:this={element} use:portalContent={id} {...props}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

package/dist/components/Library/Portal/Content.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    id?: string;
+    children?: Snippet;
+    element?: HTMLElement | null;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+declare const Content: import("svelte").Component<Props, {}, "element">;
+type Content = ReturnType<typeof Content>;
+export default Content;

package/dist/components/Library/Portal/Portal.svelte

@@ -1,3 +1,7 @@
+<script module lang="ts">
+	export { default as Content } from './Content.svelte';
+</script>
+
 <script lang="ts">
 	import { portalHost } from '../../../actions/portal';
 

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

@@ -1,3 +1,4 @@
+export { default as Content } from './Content.svelte';
 type Props = {
     id?: string;
 };

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

@@ -1 +1,2 @@
 export { default } from './Portal.svelte';
+export { default as Content } from './Content.svelte';

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

@@ -1 +1,2 @@
 export { default } from './Portal.svelte';
+export { default as Content } from './Content.svelte';

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

@@ -48,12 +48,18 @@
 	};
 
 	export type ScrollViewOverscrollBehavior = 'auto' | 'contain' | 'none';
+	export type ScrollContentSize = {
+		width: number;
+		height: number;
+	};
 
 	type Props = {
-		children: Snippet;
+		children?: Snippet;
+		layout?: Snippet<[geometry: ScrollGeometry]>;
 		viewport?: ScrollViewHandle | null;
 		axis?: ScrollAxis;
 		contentStyles?: StyleProps;
+		contentSize?: ScrollContentSize | null;
 		onScroll?: (geometry: ScrollGeometry) => void;
 		scrollGradient?: boolean;
 		scrollGradientSize?: number | string;
@@ -65,16 +71,18 @@
 
 	let {
 		children,
+		layout,
 		viewport = $bindable<ScrollViewHandle | null>(null),
 		axis = 'vertical',
 		contentStyles = {},
+		contentSize = null,
 		onScroll,
 		scrollGradient = true,
 		scrollGradientSize = '2.5rem',
 		showIndicators = true,
 		overscrollBehavior = 'contain',
 		...restProps
-	}: Props = $props();
+	}: Props & Record<string, unknown> = $props();
 
 	const extractedLoaderProps = $derived.by(() => extractLoaderProps(restProps));
 	const loaderProps = $derived(extractedLoaderProps.loaderProps);
@@ -108,16 +116,26 @@
 	let thumbYOffset = $state(0);
 	let resizeObserver: ResizeObserver | null = null;
 	let mutationObserver: MutationObserver | null = null;
+	let scrollAnimationFrame: number | null = null;
 	const scrollGradientEnabled = $derived(scrollGradient && axis !== 'horizontal');
 	const verticalScrollbarEnabled = $derived(showIndicators && axis !== 'horizontal' && canScrollY);
 	const horizontalScrollbarEnabled = $derived(showIndicators && axis !== 'vertical' && canScrollX);
+	const syntheticContentStyle = $derived.by(() => {
+		if (!contentSize) return '';
+		return `width: ${contentSize.width}px; height: ${contentSize.height}px; min-width: ${contentSize.width}px; min-height: ${contentSize.height}px;`;
+	});
 
 	const measuredContentSize = () => {
+		if (contentSize) return contentSize;
 		if (!contentElement) return { width: 0, height: 0 };
 
 		const contentRect = contentElement.getBoundingClientRect();
 		let width = Math.max(contentElement.scrollWidth, contentElement.offsetWidth, contentRect.width);
-		let height = Math.max(contentElement.scrollHeight, contentElement.offsetHeight, contentRect.height);
+		let height = Math.max(
+			contentElement.scrollHeight,
+			contentElement.offsetHeight,
+			contentRect.height
+		);
 
 		for (const child of Array.from(contentElement.children)) {
 			const childElement = child as HTMLElement;
@@ -165,6 +183,7 @@
 			}
 		};
 	}
+	const scrollGeometry = $derived.by(() => getScrollGeometry());
 
 	function syncScrollbarGeometry() {
 		if (!viewportElement || !contentElement) {
@@ -220,7 +239,14 @@
 		onScroll?.(getScrollGeometry());
 	}
 
+	function stopScrollAnimation() {
+		if (scrollAnimationFrame === null || typeof cancelAnimationFrame === 'undefined') return;
+		cancelAnimationFrame(scrollAnimationFrame);
+		scrollAnimationFrame = null;
+	}
+
 	function scrollTo(nextX: number, nextY: number) {
+		stopScrollAnimation();
 		const previousX = offsetX;
 		const previousY = offsetY;
 		offsetX = clamp(axis === 'vertical' ? 0 : nextX, 0, maxOffsetX());
@@ -229,6 +255,41 @@
 		return offsetX !== previousX || offsetY !== previousY;
 	}
 
+	function animateScrollTo(nextX: number, nextY: number) {
+		if (typeof requestAnimationFrame === 'undefined') {
+			scrollTo(nextX, nextY);
+			return;
+		}
+
+		stopScrollAnimation();
+		const fromX = offsetX;
+		const fromY = offsetY;
+		const toX = clamp(axis === 'vertical' ? 0 : nextX, 0, maxOffsetX());
+		const toY = clamp(axis === 'horizontal' ? 0 : nextY, 0, maxOffsetY());
+		const duration = 260;
+		const startedAt = performance.now();
+		const easeOutCubic = (value: number) => 1 - Math.pow(1 - value, 3);
+
+		const step = (now: number) => {
+			const progress = Math.min(1, (now - startedAt) / duration);
+			const eased = easeOutCubic(progress);
+			offsetX = fromX + (toX - fromX) * eased;
+			offsetY = fromY + (toY - fromY) * eased;
+			publishScroll();
+
+			if (progress < 1) {
+				scrollAnimationFrame = requestAnimationFrame(step);
+			} else {
+				scrollAnimationFrame = null;
+				offsetX = toX;
+				offsetY = toY;
+				publishScroll();
+			}
+		};
+
+		scrollAnimationFrame = requestAnimationFrame(step);
+	}
+
 	function shouldContainOverscroll(consumed: boolean) {
 		if (overscrollBehavior === 'none') return true;
 		return overscrollBehavior === 'contain' && consumed;
@@ -270,13 +331,20 @@
 				scrollTo(options, y ?? offsetY);
 				return;
 			}
+			if (options.behavior === 'smooth') {
+				animateScrollTo(options.left ?? offsetX, options.top ?? offsetY);
+				return;
+			}
 			scrollTo(options.left ?? offsetX, options.top ?? offsetY);
 		}
 	};
 
 	function handleWheel(event: WheelEvent) {
-		const wheelX = axis === 'horizontal' && event.deltaX === 0 ? event.deltaY : event.deltaX;
-		const consumed = scrollTo(offsetX + wheelX, offsetY + event.deltaY);
+		const shouldMapWheelYToX =
+			event.deltaX === 0 && (axis === 'horizontal' || (axis === 'both' && event.shiftKey));
+		const wheelX = shouldMapWheelYToX ? event.deltaY : event.deltaX;
+		const wheelY = axis === 'both' && event.shiftKey ? 0 : event.deltaY;
+		const consumed = scrollTo(offsetX + wheelX, offsetY + wheelY);
 
 		if (consumed || shouldContainOverscroll(consumed)) {
 			event.preventDefault();
@@ -333,6 +401,7 @@
 		});
 
 		return () => {
+			stopScrollAnimation();
 			resizeObserver?.disconnect();
 			resizeObserver = null;
 			mutationObserver?.disconnect();
@@ -363,7 +432,8 @@
 			const thumbSize = orientation === 'horizontal' ? thumbXSize : thumbYSize;
 			const maxScroll = Math.max(0, contentSize - viewportSize);
 			const maxThumbOffset = Math.max(1, viewportSize - thumbSize);
-			const delta = (orientation === 'horizontal' ? moveEvent.clientX : moveEvent.clientY) - startPointer;
+			const delta =
+				(orientation === 'horizontal' ? moveEvent.clientX : moveEvent.clientY) - startPointer;
 			const nextScroll = startScroll + (delta / maxThumbOffset) * maxScroll;
 
 			if (orientation === 'horizontal') {
@@ -383,7 +453,6 @@
 		window.addEventListener('pointerup', up);
 		window.addEventListener('pointercancel', up);
 	}
-
 </script>
 
 <div
@@ -414,9 +483,14 @@
 		<div
 			bind:this={contentElement}
 			class="scroll-view-content"
-			style={`${contentStyle} transform: translate3d(${-offsetX}px, ${-offsetY}px, 0);`}
+			class:scroll-view-content-engine={Boolean(layout)}
+			style={`${contentStyle} ${syntheticContentStyle} transform: translate3d(${-offsetX}px, ${-offsetY}px, 0);`}
 		>
-			{@render children()}
+			{#if layout}
+				{@render layout(scrollGeometry)}
+			{:else if children}
+				{@render children()}
+			{/if}
 		</div>
 	</div>
 	{#if scrollGradientEnabled}
@@ -481,6 +555,11 @@
 		will-change: transform;
 	}
 
+	.scroll-view-content-engine {
+		position: relative;
+		padding: 0;
+	}
+
 	.scroll-view-horizontal .scroll-view-content {
 		min-height: 100%;
 		width: max-content;

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

@@ -42,17 +42,24 @@ export type ScrollViewHandle = {
     scrollTo: (options: ScrollToOptions | number, y?: number) => void;
 };
 export type ScrollViewOverscrollBehavior = 'auto' | 'contain' | 'none';
+export type ScrollContentSize = {
+    width: number;
+    height: number;
+};
 type Props = {
-    children: Snippet;
+    children?: Snippet;
+    layout?: Snippet<[geometry: ScrollGeometry]>;
     viewport?: ScrollViewHandle | null;
     axis?: ScrollAxis;
     contentStyles?: StyleProps;
+    contentSize?: ScrollContentSize | null;
     onScroll?: (geometry: ScrollGeometry) => void;
     scrollGradient?: boolean;
     scrollGradientSize?: number | string;
     showIndicators?: boolean;
     overscrollBehavior?: ScrollViewOverscrollBehavior;
 } & LayoutProps & StyleProps & LoaderProps;
-declare const ScrollView: import("svelte").Component<Props, {}, "viewport">;
+type $$ComponentProps = Props & Record<string, unknown>;
+declare const ScrollView: import("svelte").Component<$$ComponentProps, {}, "viewport">;
 type ScrollView = ReturnType<typeof ScrollView>;
 export default ScrollView;

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

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

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

@@ -6,12 +6,13 @@
 </script>
 
 <script lang="ts">
+	import VStack from '../VStack';
 	import SearchField from './SearchField.svelte';
 
 	let value = $state('');
 </script>
 
-<div class="vstack w-full max-w-sm gap-2">
+<VStack width="24rem" gap={5}>
 	<SearchField bind:value placeholder="Search components..." />
 	<p class="text-xs text-[var(--sveltely-text-secondary-color)]">Value: {value || 'empty'}</p>
-</div>
+</VStack>