@x33025/sveltely 0.1.24 → 0.1.28

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.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/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,11 +116,17 @@
 	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();
@@ -169,6 +183,7 @@
 			}
 		};
 	}
+	const scrollGeometry = $derived.by(() => getScrollGeometry());
 
 	function syncScrollbarGeometry() {
 		if (!viewportElement || !contentElement) {
@@ -224,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());
@@ -233,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;
@@ -274,6 +331,10 @@
 				scrollTo(options, y ?? offsetY);
 				return;
 			}
+			if (options.behavior === 'smooth') {
+				animateScrollTo(options.left ?? offsetX, options.top ?? offsetY);
+				return;
+			}
 			scrollTo(options.left ?? offsetX, options.top ?? offsetY);
 		}
 	};
@@ -340,6 +401,7 @@
 		});
 
 		return () => {
+			stopScrollAnimation();
 			resizeObserver?.disconnect();
 			resizeObserver = null;
 			mutationObserver?.disconnect();
@@ -421,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}
@@ -488,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

@@ -12,7 +12,7 @@
 	let value = $state('');
 </script>
 
-<VStack width="100%" maxWidth="24rem" gap={5}>
+<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>
 </VStack>

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

@@ -18,7 +18,7 @@
 	let value = $state('day');
 </script>
 
-<VStack align="center" justify="center" gap={5}>
+<VStack gap={5}>
 	<SegmentedPicker {options} bind:value />
 	<p class="text-xs text-[var(--sveltely-text-secondary-color)]">Selected: {value}</p>
 </VStack>

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

@@ -12,7 +12,7 @@
 	let value = $state(35);
 </script>
 
-<VStack width="100%" maxWidth="24rem" gap={5}>
+<VStack width="24rem" gap={5}>
 	<Slider bind:value min={0} max={100} />
 	<p class="text-xs text-[var(--sveltely-text-secondary-color)]">Value: {value}</p>
 </VStack>

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

@@ -270,7 +270,15 @@
 	})}
 {/snippet}
 
-<Table data={rows} bind:selection bind:sortOrder selectionMode="multiple" height="100%">
+<Table
+	data={rows}
+	bind:selection
+	bind:sortOrder
+	selectionMode="multiple"
+	virtualized
+	rowHeight={48}
+	height="100%"
+>
 	<Table.Column label="Project" sortKey="name" sortable minWidth={160}>
 		{#snippet cell(project: Project)}
 			{@render projectCell(project)}