@x33025/sveltely 0.1.18 → 0.1.21

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { tick } from 'svelte';
+	import { tick, untrack } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import { loader as loaderAction } from '../../../actions/loader';
 	import { extractLoaderProps, resolveLoaderOptions, type LoaderProps } from '../../../style/loader';
@@ -33,26 +33,46 @@
 		};
 	};
 
+	export type ScrollViewHandle = {
+		element: HTMLElement | null;
+		get scrollTop(): number;
+		set scrollTop(value: number);
+		get scrollLeft(): number;
+		set scrollLeft(value: number);
+		get clientWidth(): number;
+		get clientHeight(): number;
+		get scrollWidth(): number;
+		get scrollHeight(): number;
+		getBoundingClientRect(): DOMRect;
+		scrollTo: (options: ScrollToOptions | number, y?: number) => void;
+	};
+
+	export type ScrollViewOverscrollBehavior = 'auto' | 'contain' | 'none';
+
 	type Props = {
 		children: Snippet;
-		viewport?: HTMLElement | null;
+		viewport?: ScrollViewHandle | null;
 		axis?: ScrollAxis;
 		contentStyles?: StyleProps;
 		onScroll?: (geometry: ScrollGeometry) => void;
 		scrollGradient?: boolean;
 		scrollGradientSize?: number | string;
+		showIndicators?: boolean;
+		overscrollBehavior?: ScrollViewOverscrollBehavior;
 	} & LayoutProps &
 		StyleProps &
 		LoaderProps;
 
 	let {
 		children,
-		viewport = $bindable<HTMLElement | null>(null),
+		viewport = $bindable<ScrollViewHandle | null>(null),
 		axis = 'vertical',
 		contentStyles = {},
 		onScroll,
 		scrollGradient = true,
-		scrollGradientSize = '1rem',
+		scrollGradientSize = '2.5rem',
+		showIndicators = true,
+		overscrollBehavior = 'contain',
 		...restProps
 	}: Props = $props();
 
@@ -76,71 +96,297 @@
 	);
 	let canScrollToTop = $state(false);
 	let canScrollToBottom = $state(false);
+	let viewportElement = $state<HTMLDivElement | null>(null);
+	let contentElement = $state<HTMLDivElement | null>(null);
+	let offsetX = $state(0);
+	let offsetY = $state(0);
+	let canScrollX = $state(false);
+	let canScrollY = $state(false);
+	let thumbXSize = $state(0);
+	let thumbYSize = $state(0);
+	let thumbXOffset = $state(0);
+	let thumbYOffset = $state(0);
+	let resizeObserver: ResizeObserver | null = null;
+	let mutationObserver: MutationObserver | null = null;
 	const scrollGradientEnabled = $derived(scrollGradient && axis !== 'horizontal');
+	const verticalScrollbarEnabled = $derived(showIndicators && axis !== 'horizontal' && canScrollY);
+	const horizontalScrollbarEnabled = $derived(showIndicators && axis !== 'vertical' && canScrollX);
 
-	function syncScrollGradient(geometry: ScrollGeometry) {
-		if (!scrollGradientEnabled) return;
-		canScrollToTop = geometry.remaining.top > 0;
-		canScrollToBottom = geometry.remaining.bottom > 0;
-	}
+	const measuredContentSize = () => {
+		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);
 
-	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;
+		for (const child of Array.from(contentElement.children)) {
+			const childElement = child as HTMLElement;
+			const childRect = childElement.getBoundingClientRect();
+			const childRight = childRect.right - contentRect.left;
+			const childBottom = childRect.bottom - contentRect.top;
+			width = Math.max(width, childElement.scrollWidth, childElement.offsetWidth, childRight);
+			height = Math.max(height, childElement.scrollHeight, childElement.offsetHeight, childBottom);
+		}
+
+		return { width, height };
+	};
+	const contentWidth = () => measuredContentSize().width;
+	const contentHeight = () => measuredContentSize().height;
+	const maxOffsetX = () =>
+		viewportElement ? Math.max(0, contentWidth() - viewportElement.clientWidth) : 0;
+	const maxOffsetY = () =>
+		viewportElement ? Math.max(0, contentHeight() - viewportElement.clientHeight) : 0;
+	const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
+
+	function getScrollGeometry(): ScrollGeometry {
+		const maxX = maxOffsetX();
+		const maxY = maxOffsetY();
 
 		return {
 			axis,
-			offset: { x, y },
+			offset: { x: offsetX, y: offsetY },
 			viewport: {
-				width: node.clientWidth,
-				height: node.clientHeight
+				width: viewportElement?.clientWidth ?? 0,
+				height: viewportElement?.clientHeight ?? 0
 			},
 			content: {
-				width: node.scrollWidth,
-				height: node.scrollHeight
+				width: contentWidth(),
+				height: contentHeight()
 			},
 			remaining: {
-				top: y,
-				right: maxX - x,
-				bottom: maxY - y,
-				left: x
+				top: offsetY,
+				right: maxX - offsetX,
+				bottom: maxY - offsetY,
+				left: offsetX
 			},
 			progress: {
-				x: maxX === 0 ? 1 : x / maxX,
-				y: maxY === 0 ? 1 : y / maxY
+				x: maxX === 0 ? 1 : offsetX / maxX,
+				y: maxY === 0 ? 1 : offsetY / maxY
 			}
 		};
 	}
 
-	function handleScroll(event: Event) {
-		const geometry = getScrollGeometry(event.currentTarget as HTMLElement);
-		syncScrollGradient(geometry);
-		onScroll?.(geometry);
+	function syncScrollbarGeometry() {
+		if (!viewportElement || !contentElement) {
+			canScrollX = false;
+			canScrollY = false;
+			thumbXSize = 0;
+			thumbYSize = 0;
+			thumbXOffset = 0;
+			thumbYOffset = 0;
+			return;
+		}
+		const maxX = maxOffsetX();
+		const maxY = maxOffsetY();
+		canScrollX = maxX > 1;
+		canScrollY = maxY > 1;
+		offsetX = clamp(offsetX, 0, maxX);
+		offsetY = clamp(offsetY, 0, maxY);
+
+		if (canScrollX) {
+			const ratio = viewportElement.clientWidth / contentWidth();
+			thumbXSize = Math.max(24, viewportElement.clientWidth * ratio);
+			thumbXOffset = (offsetX / maxX) * Math.max(0, viewportElement.clientWidth - thumbXSize);
+		} else {
+			thumbXSize = 0;
+			thumbXOffset = 0;
+		}
+
+		if (canScrollY) {
+			const ratio = viewportElement.clientHeight / contentHeight();
+			thumbYSize = Math.max(24, viewportElement.clientHeight * ratio);
+			thumbYOffset = (offsetY / maxY) * Math.max(0, viewportElement.clientHeight - thumbYSize);
+		} else {
+			thumbYSize = 0;
+			thumbYOffset = 0;
+		}
 	}
 
+	function syncScrollGradient() {
+		if (!scrollGradientEnabled || !viewportElement || !contentElement) {
+			canScrollToTop = false;
+			canScrollToBottom = false;
+			return;
+		}
+
+		const maxY = maxOffsetY();
+		canScrollToTop = maxY > 1 && offsetY > 1;
+		canScrollToBottom = maxY > 1 && maxY - offsetY > 1;
+	}
+
+	function publishScroll() {
+		syncScrollbarGeometry();
+		syncScrollGradient();
+		onScroll?.(getScrollGeometry());
+	}
+
+	function scrollTo(nextX: number, nextY: number) {
+		const previousX = offsetX;
+		const previousY = offsetY;
+		offsetX = clamp(axis === 'vertical' ? 0 : nextX, 0, maxOffsetX());
+		offsetY = clamp(axis === 'horizontal' ? 0 : nextY, 0, maxOffsetY());
+		publishScroll();
+		return offsetX !== previousX || offsetY !== previousY;
+	}
+
+	function shouldContainOverscroll(consumed: boolean) {
+		if (overscrollBehavior === 'none') return true;
+		return overscrollBehavior === 'contain' && consumed;
+	}
+
+	const scrollViewHandle: ScrollViewHandle = {
+		get element() {
+			return viewportElement;
+		},
+		get scrollTop() {
+			return offsetY;
+		},
+		set scrollTop(value: number) {
+			scrollTo(offsetX, value);
+		},
+		get scrollLeft() {
+			return offsetX;
+		},
+		set scrollLeft(value: number) {
+			scrollTo(value, offsetY);
+		},
+		get clientWidth() {
+			return viewportElement?.clientWidth ?? 0;
+		},
+		get clientHeight() {
+			return viewportElement?.clientHeight ?? 0;
+		},
+		get scrollWidth() {
+			return contentWidth();
+		},
+		get scrollHeight() {
+			return contentHeight();
+		},
+		getBoundingClientRect() {
+			return viewportElement?.getBoundingClientRect() ?? new DOMRect();
+		},
+		scrollTo(options: ScrollToOptions | number, y?: number) {
+			if (typeof options === 'number') {
+				scrollTo(options, y ?? offsetY);
+				return;
+			}
+			scrollTo(options.left ?? offsetX, options.top ?? offsetY);
+		}
+	};
+
 	function handleWheel(event: WheelEvent) {
-		const node = event.currentTarget as HTMLElement;
+		const wheelX = axis === 'horizontal' && event.deltaX === 0 ? event.deltaY : event.deltaX;
+		const consumed = scrollTo(offsetX + wheelX, offsetY + event.deltaY);
 
-		event.preventDefault();
-		event.stopPropagation();
+		if (consumed || shouldContainOverscroll(consumed)) {
+			event.preventDefault();
+			event.stopPropagation();
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		const line = 40;
+		const pageX = viewportElement?.clientWidth ?? 0;
+		const pageY = viewportElement?.clientHeight ?? 0;
+
+		let consumed = false;
 
-		if (axis !== 'horizontal') node.scrollTop += event.deltaY;
-		if (axis !== 'vertical') node.scrollLeft += event.deltaX;
+		if (event.key === 'ArrowDown') consumed = scrollTo(offsetX, offsetY + line);
+		else if (event.key === 'ArrowUp') consumed = scrollTo(offsetX, offsetY - line);
+		else if (event.key === 'ArrowRight') consumed = scrollTo(offsetX + line, offsetY);
+		else if (event.key === 'ArrowLeft') consumed = scrollTo(offsetX - line, offsetY);
+		else if (event.key === 'PageDown') consumed = scrollTo(offsetX, offsetY + pageY);
+		else if (event.key === 'PageUp') consumed = scrollTo(offsetX, offsetY - pageY);
+		else if (event.key === 'Home') consumed = scrollTo(0, 0);
+		else if (event.key === 'End') consumed = scrollTo(maxOffsetX(), maxOffsetY());
+		else return;
+
+		if (consumed || shouldContainOverscroll(consumed)) event.preventDefault();
 	}
 
 	$effect(() => {
-		if (!scrollGradientEnabled || !viewport) return;
+		if (!viewportElement || !contentElement) return;
+		viewport = scrollViewHandle;
+		resizeObserver?.disconnect();
+		resizeObserver = new ResizeObserver(() => untrack(publishScroll));
+		resizeObserver.observe(viewportElement);
+		resizeObserver.observe(contentElement);
+
+		const observeContentChildren = () => {
+			if (!resizeObserver || !contentElement) return;
+			for (const child of Array.from(contentElement.children)) {
+				resizeObserver.observe(child);
+			}
+		};
+
+		observeContentChildren();
+		mutationObserver?.disconnect();
+		mutationObserver = new MutationObserver(() => {
+			observeContentChildren();
+			untrack(publishScroll);
+		});
+		mutationObserver.observe(contentElement, { childList: true });
+
 		void tick().then(() => {
-			if (!viewport) return;
-			syncScrollGradient(getScrollGeometry(viewport));
+			if (!viewportElement || !contentElement) return;
+			untrack(publishScroll);
 		});
+
+		return () => {
+			resizeObserver?.disconnect();
+			resizeObserver = null;
+			mutationObserver?.disconnect();
+			mutationObserver = null;
+		};
+	});
+
+	$effect(() => {
+		scrollGradientEnabled;
+		if (!viewportElement || !contentElement) return;
+		untrack(publishScroll);
 	});
+
+	function startThumbDrag(event: PointerEvent, orientation: 'horizontal' | 'vertical') {
+		if (!viewportElement) return;
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		const startPointer = orientation === 'horizontal' ? event.clientX : event.clientY;
+		const startScroll = orientation === 'horizontal' ? offsetX : offsetY;
+
+		const move = (moveEvent: PointerEvent) => {
+			if (!viewportElement) return;
+			const viewportSize =
+				orientation === 'horizontal' ? viewportElement.clientWidth : viewportElement.clientHeight;
+			const contentSize = orientation === 'horizontal' ? contentWidth() : contentHeight();
+			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 nextScroll = startScroll + (delta / maxThumbOffset) * maxScroll;
+
+			if (orientation === 'horizontal') {
+				scrollTo(nextScroll, offsetY);
+			} else {
+				scrollTo(offsetX, nextScroll);
+			}
+		};
+
+		const up = () => {
+			window.removeEventListener('pointermove', move);
+			window.removeEventListener('pointerup', up);
+			window.removeEventListener('pointercancel', up);
+		};
+
+		window.addEventListener('pointermove', move);
+		window.addEventListener('pointerup', up);
+		window.addEventListener('pointercancel', up);
+	}
+
 </script>
 
 <div
-	bind:this={viewport}
 	class="scroll-view"
 	class:scroll-view-vertical={axis === 'vertical'}
 	class:scroll-view-horizontal={axis === 'horizontal'}
@@ -151,17 +397,56 @@
 	style={rootStyle}
 	{...props}
 	use:loaderAction={loaderOptions}
-	onscroll={handleScroll}
-	onwheel={handleWheel}
 >
 	{#if scrollGradientEnabled}
-		<div class="scroll-view-gradient scroll-view-gradient-top"></div>
+		<div class="scroll-view-gradient scroll-view-gradient-top" aria-hidden="true"></div>
 	{/if}
-	<div class="scroll-view-content" style={contentStyle}>
-		{@render children()}
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+	<div
+		bind:this={viewportElement}
+		class="scroll-view-viewport"
+		role="region"
+		aria-label="Scrollable content"
+		tabindex="0"
+		onwheel={handleWheel}
+		onkeydown={handleKeydown}
+	>
+		<div
+			bind:this={contentElement}
+			class="scroll-view-content"
+			style={`${contentStyle} transform: translate3d(${-offsetX}px, ${-offsetY}px, 0);`}
+		>
+			{@render children()}
+		</div>
 	</div>
 	{#if scrollGradientEnabled}
-		<div class="scroll-view-gradient scroll-view-gradient-bottom"></div>
+		<div class="scroll-view-gradient scroll-view-gradient-bottom" aria-hidden="true"></div>
+	{/if}
+	{#if verticalScrollbarEnabled}
+		<div class="scroll-view-scrollbar scroll-view-scrollbar-vertical" aria-hidden="true">
+			<button
+				type="button"
+				class="scroll-view-thumb scroll-view-thumb-vertical"
+				aria-label="Scroll vertically"
+				style:height={`${thumbYSize}px`}
+				style:transform={`translateY(${thumbYOffset}px)`}
+				onpointerdown={(event) => startThumbDrag(event, 'vertical')}
+				tabindex="-1"
+			></button>
+		</div>
+	{/if}
+	{#if horizontalScrollbarEnabled}
+		<div class="scroll-view-scrollbar scroll-view-scrollbar-horizontal" aria-hidden="true">
+			<button
+				type="button"
+				class="scroll-view-thumb scroll-view-thumb-horizontal"
+				aria-label="Scroll horizontally"
+				style:width={`${thumbXSize}px`}
+				style:transform={`translateX(${thumbXOffset}px)`}
+				onpointerdown={(event) => startThumbDrag(event, 'horizontal')}
+				tabindex="-1"
+			></button>
+		</div>
 	{/if}
 </div>
 
@@ -171,33 +456,29 @@
 		min-height: 0;
 		width: 100%;
 		height: 100%;
-		border-radius: var(--scroll-view-border-radius, var(--sveltely-border-radius));
+		border-radius: var(--scroll-view-border-radius, 0);
 		background: var(--scroll-view-background, transparent);
 		color: var(--scroll-view-color, inherit);
-		scrollbar-gutter: stable;
-		overscroll-behavior: contain;
 		position: relative;
+		overflow: hidden;
 	}
 
-	.scroll-view-vertical {
-		overflow-x: hidden;
-		overflow-y: auto;
-	}
-
-	.scroll-view-horizontal {
-		overflow-x: auto;
-		overflow-y: hidden;
-	}
-
-	.scroll-view-both {
-		overflow: auto;
+	.scroll-view-viewport {
+		width: 100%;
+		height: 100%;
+		min-width: 0;
+		min-height: 0;
+		overflow: hidden;
+		touch-action: none;
 	}
 
 	.scroll-view-content {
+		width: 100%;
 		min-width: 100%;
 		min-height: 100%;
 		padding: var(--scroll-view-content-padding-y, var(--sveltely-inset))
 			var(--scroll-view-content-padding-x, var(--sveltely-inset));
+		will-change: transform;
 	}
 
 	.scroll-view-horizontal .scroll-view-content {
@@ -215,10 +496,11 @@
 	}
 
 	.scroll-view-gradient {
-		position: sticky;
+		position: absolute;
+		left: 0;
+		right: 0;
 		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;
@@ -226,18 +508,83 @@
 
 	.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);
+		background: linear-gradient(
+			180deg in oklab,
+			rgb(255 255 255 / 0.72) 0%,
+			rgb(255 255 255 / 0.67) 8.1%,
+			rgb(255 255 255 / 0.58) 15.5%,
+			rgb(255 255 255 / 0.46) 24.5%,
+			rgb(255 255 255 / 0.32) 38.4%,
+			rgb(255 255 255 / 0.18) 58.7%,
+			rgb(255 255 255 / 0.07) 80.2%,
+			rgb(255 255 255 / 0) 100%
+		);
 	}
 
 	.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);
+		background: linear-gradient(
+			0deg in oklab,
+			rgb(255 255 255 / 0.72) 0%,
+			rgb(255 255 255 / 0.67) 8.1%,
+			rgb(255 255 255 / 0.58) 15.5%,
+			rgb(255 255 255 / 0.46) 24.5%,
+			rgb(255 255 255 / 0.32) 38.4%,
+			rgb(255 255 255 / 0.18) 58.7%,
+			rgb(255 255 255 / 0.07) 80.2%,
+			rgb(255 255 255 / 0) 100%
+		);
 	}
 
-	.scroll-view-can-scroll-up .scroll-view-gradient-top,
-	.scroll-view-can-scroll-down .scroll-view-gradient-bottom {
+	.scroll-view-can-scroll-up > .scroll-view-gradient-top,
+	.scroll-view-can-scroll-down > .scroll-view-gradient-bottom {
 		opacity: 1;
 	}
+
+	.scroll-view-scrollbar {
+		position: absolute;
+		z-index: 3;
+		pointer-events: none;
+	}
+
+	.scroll-view-scrollbar-vertical {
+		top: calc(var(--sveltely-inset) * 0.5);
+		right: calc(var(--sveltely-inset) * 0.5);
+		bottom: calc(var(--sveltely-inset) * 0.5);
+		width: 0.375rem;
+	}
+
+	.scroll-view-scrollbar-horizontal {
+		right: calc(var(--sveltely-inset) * 0.5);
+		bottom: calc(var(--sveltely-inset) * 0.5);
+		left: calc(var(--sveltely-inset) * 0.5);
+		height: 0.375rem;
+	}
+
+	.scroll-view-thumb {
+		position: absolute;
+		display: block;
+		border: 0;
+		border-radius: 999px;
+		background: color-mix(in oklab, var(--sveltely-text-secondary-color) 48%, transparent);
+		padding: 0;
+		pointer-events: auto;
+		transition: background-color 120ms ease;
+	}
+
+	.scroll-view-thumb:hover {
+		background: color-mix(in oklab, var(--sveltely-text-secondary-color) 72%, transparent);
+	}
+
+	.scroll-view-thumb-vertical {
+		top: 0;
+		right: 0;
+		width: 100%;
+	}
+
+	.scroll-view-thumb-horizontal {
+		bottom: 0;
+		left: 0;
+		height: 100%;
+	}
 </style>

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

@@ -28,14 +28,30 @@ export type ScrollGeometry = {
         y: number;
     };
 };
+export type ScrollViewHandle = {
+    element: HTMLElement | null;
+    get scrollTop(): number;
+    set scrollTop(value: number);
+    get scrollLeft(): number;
+    set scrollLeft(value: number);
+    get clientWidth(): number;
+    get clientHeight(): number;
+    get scrollWidth(): number;
+    get scrollHeight(): number;
+    getBoundingClientRect(): DOMRect;
+    scrollTo: (options: ScrollToOptions | number, y?: number) => void;
+};
+export type ScrollViewOverscrollBehavior = 'auto' | 'contain' | 'none';
 type Props = {
     children: Snippet;
-    viewport?: HTMLElement | null;
+    viewport?: ScrollViewHandle | null;
     axis?: ScrollAxis;
     contentStyles?: StyleProps;
     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 ScrollView = ReturnType<typeof ScrollView>;

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

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

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

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