@x33025/sveltely 0.1.2 → 0.1.4

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

@@ -1,2 +1,13 @@
-export { default } from './Dropdown.svelte';
-export type { DropdownAction, DropdownDivider, DropdownEntry, DropdownGroup, DropdownItem, DropdownSubmenu } from './types';
+import DropdownComponent from './Dropdown.svelte';
+import Action from './Action.svelte';
+import Divider from './Divider.svelte';
+import Item from './Item.svelte';
+import Section from './Section.svelte';
+declare const Dropdown: typeof DropdownComponent & {
+    Action: typeof Action;
+    Divider: typeof Divider;
+    Item: typeof Item;
+    Section: typeof Section;
+};
+export default Dropdown;
+export type { DropdownActionState, DropdownItemState, DropdownTriggerState } from './context';

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

@@ -1 +1,11 @@
-export { default } from './Dropdown.svelte';
+import DropdownComponent from './Dropdown.svelte';
+import Action from './Action.svelte';
+import Divider from './Divider.svelte';
+import Item from './Item.svelte';
+import Section from './Section.svelte';
+const Dropdown = DropdownComponent;
+Dropdown.Action = Action;
+Dropdown.Divider = Divider;
+Dropdown.Item = Item;
+Dropdown.Section = Section;
+export default Dropdown;

package/dist/components/Library/Floating/Floating.svelte

@@ -2,11 +2,7 @@
 	import { tick, onDestroy } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import { portalContent } from '../../../actions/portal';
-	import {
-		autoAlignForViewport,
-		computePosition,
-		type Anchor
-	} from '../../../utils/positioning';
+	import { autoAlignForViewport, computePosition, type Anchor } from '../../../utils/positioning';
 	import {
 		hasOpenChild,
 		isAncestor,
@@ -255,7 +251,11 @@
 			placement,
 			preferredAlign
 		);
-		panelCoords = offsetCoords({ top: result.top, left: result.left }, result.anchor, getFloatingInset());
+		panelCoords = offsetCoords(
+			{ top: result.top, left: result.left },
+			result.anchor,
+			getFloatingInset()
+		);
 		panelTransform = result.transform;
 		resolvedAnchor = result.anchor;
 	};
@@ -339,7 +339,10 @@
 
 	$effect(() => {
 		if (typeof window === 'undefined') return;
-		const handleWindowChange = () => closePanel();
+		const handleWindowChange = (event: Event) => {
+			if (event.type === 'scroll' && isEventInFloatingTree(event)) return;
+			closePanel();
+		};
 		window.addEventListener('scroll', handleWindowChange, true);
 		window.addEventListener('resize', handleWindowChange);
 		return () => {

package/dist/components/Library/ImageMask/BrushPreview.svelte

@@ -56,9 +56,9 @@
 		pointer-events: none;
 		border: 1.5px solid rgb(255 255 255 / 0.95);
 		border-radius: 9999px;
-		background: color-mix(in oklab, var(--sveltely-primary-color) 16%, transparent);
+		background: color-mix(in oklab, var(--sveltely-active-color) 16%, transparent);
 		box-shadow:
-			0 0 0 1px color-mix(in oklab, var(--sveltely-primary-color) 90%, transparent),
+			0 0 0 1px color-mix(in oklab, var(--sveltely-active-color) 90%, transparent),
 			0 1px 4px rgb(0 0 0 / 0.22);
 		will-change: transform, width, height;
 	}
@@ -88,16 +88,16 @@
 		box-sizing: border-box;
 		border-radius: 9999px;
 		border: 1.5px solid rgb(255 255 255 / 0.95);
-		background: color-mix(in oklab, var(--sveltely-primary-color) 20%, transparent);
+		background: color-mix(in oklab, var(--sveltely-active-color) 20%, transparent);
 		box-shadow:
-			0 0 0 1px color-mix(in oklab, var(--sveltely-primary-color) 95%, transparent),
+			0 0 0 1px color-mix(in oklab, var(--sveltely-active-color) 95%, transparent),
 			0 8px 24px rgb(0 0 0 / 0.24);
 	}
 
 	.brush-size-preview-label {
 		border-radius: 9999px;
 		background: rgb(255 255 255 / 0.88);
-		color: var(--color-zinc-950);
+		color: var(--sveltely-primary-color);
 		font-size: 0.75rem;
 		font-weight: 650;
 		line-height: 1;
@@ -113,7 +113,7 @@
 	.brush-size-preview-erase .brush-size-preview-circle {
 		background: rgb(255 255 255 / 0.2);
 		box-shadow:
-			0 0 0 1px color-mix(in oklab, var(--sveltely-primary-color) 85%, transparent),
+			0 0 0 1px color-mix(in oklab, var(--sveltely-active-color) 85%, transparent),
 			0 8px 24px rgb(0 0 0 / 0.24);
 	}
 </style>

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

@@ -30,15 +30,15 @@
 		fit="cover"
 		class="aspect-square"
 	/>
-	<div class="vstack gap-2 text-sm text-zinc-600">
-		<div class="font-medium text-zinc-900">Mask</div>
+	<div class="vstack gap-2 text-sm text-[var(--sveltely-secondary-color)]">
+		<div class="font-medium text-[var(--sveltely-primary-color)]">Mask</div>
 		<div class="aspect-square overflow-hidden rounded-md border border-zinc-200 bg-black">
 			{#if mask}
 				<img src={mask.dataUrl} alt="Exported mask" class="size-full object-contain" />
 			{/if}
 		</div>
 		<label class="vstack gap-2 bg-white p-3">
-			<span class="font-medium text-zinc-900">Brush size {brushSize}px</span>
+			<span class="font-medium text-[var(--sveltely-primary-color)]">Brush size {brushSize}px</span>
 			<Slider bind:value={brushSize} min={6} max={72} step={1} />
 			<div class="image-mask-controls">
 				<button
@@ -86,7 +86,7 @@
 		width: fit-content;
 		align-items: center;
 		gap: 0.25rem;
-		background: white;
+		background: var(--sveltely-background-color);
 		padding: 0.25rem;
 	}
 
@@ -97,7 +97,7 @@
 		align-items: center;
 		justify-content: center;
 		border-radius: 9999px;
-		color: var(--color-zinc-500);
+		color: var(--sveltely-secondary-color);
 		transition:
 			background-color 150ms,
 			color 150ms,
@@ -106,8 +106,8 @@
 
 	.image-mask-controls button:hover:not(:disabled),
 	.image-mask-controls button.active {
-		background: var(--sveltely-primary-color);
-		color: white;
+		background: var(--sveltely-active-color);
+		color: var(--sveltely-background-color);
 	}
 
 	.image-mask-controls button:disabled {

package/dist/components/Library/ImageMask/MaskLayer.svelte

@@ -145,9 +145,9 @@
 		context.clearRect(0, 0, viewportWidth, viewportHeight);
 		if (!surfaceCanvas) return;
 		const primaryColor = canvas
-			? getComputedStyle(canvas).getPropertyValue('--sveltely-primary-color').trim() ||
-				'var(--sveltely-primary-color)'
-			: 'var(--sveltely-primary-color)';
+			? getComputedStyle(canvas).getPropertyValue('--sveltely-active-color').trim() ||
+				'var(--sveltely-active-color)'
+			: 'var(--sveltely-active-color)';
 		context.save();
 		context.drawImage(surfaceCanvas, 0, 0, viewportWidth, viewportHeight);
 		context.globalCompositeOperation = 'source-in';

package/dist/components/Library/Label/Label.svelte

@@ -127,11 +127,9 @@
 		min-height: min-content;
 		gap: var(--label-gap, calc(var(--sveltely-gap) * 0.75));
 		border-radius: var(--label-border-radius, 0px);
-		color: var(--label-color, var(--color-zinc-700));
+		color: var(--label-color, var(--sveltely-primary-color));
 		font-size: var(--label-font-size);
-		padding:
-			var(--label-padding-y, 0px)
-			var(--label-padding-x, 0px);
+		padding: var(--label-padding-y, 0px) var(--label-padding-x, 0px);
 	}
 
 	.label[data-orientation='top'] {

package/dist/components/Library/NavigationStack/NavigationStack.svelte

@@ -122,7 +122,9 @@
 		</div>
 	{/if}
 
-	<div class="navigation-stack-pane navigation-stack-pane-center navigation-stack-pane-body navigation-stack-content vstack">
+	<div
+		class="navigation-stack-pane navigation-stack-pane-center navigation-stack-pane-body navigation-stack-content vstack"
+	>
 		{#if children}
 			{@render children()}
 		{/if}
@@ -180,7 +182,7 @@
 	.navigation-stack-pane-header {
 		grid-row: 1;
 		border-bottom: 1px solid var(--sveltely-border-color);
-		background: white;
+		background: var(--sveltely-background-color);
 	}
 
 	.navigation-stack-pane-body {
@@ -204,20 +206,28 @@
 	}
 
 	.navigation-stack-sidebar-inner {
-		background: var(--color-zinc-50);
+		background: var(--sveltely-background-color);
 		transition:
 			visibility 0ms linear 300ms,
 			background-color 300ms ease-in-out;
 	}
 
-	.navigation-stack[data-left-open='true'] .navigation-stack-pane-left.navigation-stack-pane-body .navigation-stack-sidebar-inner,
-	.navigation-stack[data-right-open='true'] .navigation-stack-pane-right.navigation-stack-pane-body .navigation-stack-sidebar-inner {
+	.navigation-stack[data-left-open='true']
+		.navigation-stack-pane-left.navigation-stack-pane-body
+		.navigation-stack-sidebar-inner,
+	.navigation-stack[data-right-open='true']
+		.navigation-stack-pane-right.navigation-stack-pane-body
+		.navigation-stack-sidebar-inner {
 		visibility: visible;
 		transition-delay: 0ms;
 	}
 
-	.navigation-stack[data-left-open='false'] .navigation-stack-pane-left.navigation-stack-pane-body .navigation-stack-sidebar-inner,
-	.navigation-stack[data-right-open='false'] .navigation-stack-pane-right.navigation-stack-pane-body .navigation-stack-sidebar-inner {
+	.navigation-stack[data-left-open='false']
+		.navigation-stack-pane-left.navigation-stack-pane-body
+		.navigation-stack-sidebar-inner,
+	.navigation-stack[data-right-open='false']
+		.navigation-stack-pane-right.navigation-stack-pane-body
+		.navigation-stack-sidebar-inner {
 		visibility: hidden;
 		pointer-events: none;
 	}

package/dist/components/Library/NavigationStack/Toolbar.svelte

@@ -21,7 +21,12 @@
 	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'navigation-stack-toolbar'));
 </script>
 
-<div class="navigation-stack-toolbar-shell vstack h-full" style={rootStyle} data-chrome={chrome ? 'true' : 'false'} {...props}>
+<div
+	class="navigation-stack-toolbar-shell vstack h-full"
+	style={rootStyle}
+	data-chrome={chrome ? 'true' : 'false'}
+	{...props}
+>
 	{#if header}
 		<div
 			class="navigation-stack-toolbar flex items-center gap-2"
@@ -41,7 +46,7 @@
 <style>
 	.navigation-stack-toolbar {
 		border-bottom: 1px solid var(--sveltely-border-color);
-		background: white;
+		background: var(--sveltely-background-color);
 	}
 
 	.navigation-stack-toolbar-shell[data-chrome='false'] .navigation-stack-toolbar {

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

@@ -64,7 +64,9 @@
 	});
 	const textEditorProps = $derived({ textAlign });
 	const rootStyle = $derived.by(() =>
-		[surfaceStyle(styleProps, 'text-field'), textEditorStyle(textEditorProps)].filter(Boolean).join(' ')
+		[surfaceStyle(styleProps, 'text-field'), textEditorStyle(textEditorProps)]
+			.filter(Boolean)
+			.join(' ')
 	);
 	const describedBy = $derived(help ? 'text-field-message' : undefined);
 
@@ -148,7 +150,7 @@
 		min-width: 0;
 		flex-direction: column;
 		gap: var(--text-field-gap, calc(var(--sveltely-gap) * 0.75));
-		color: var(--text-field-color, var(--color-zinc-900));
+		color: var(--text-field-color, var(--sveltely-primary-color));
 		font-size: var(--text-field-font-size, calc(var(--sveltely-font-size) * 0.875));
 	}
 
@@ -157,28 +159,31 @@
 		min-width: 0;
 		border: 1px solid var(--text-field-border-color, var(--sveltely-border-color));
 		border-radius: var(--text-field-border-radius, var(--sveltely-border-radius));
-		background: var(--text-field-background, white);
+		background: var(--text-field-background, var(--sveltely-background-color));
 		color: inherit;
 		font-variant-numeric: tabular-nums;
 		line-height: 1.25rem;
 		outline: none;
-		padding:
-			var(--text-field-padding-y, calc(var(--sveltely-padding-y) * 0.67))
+		padding: var(--text-field-padding-y, calc(var(--sveltely-padding-y) * 0.67))
 			var(--text-field-padding-x, var(--sveltely-padding-x));
 		text-align: var(--text-field-text-align, start);
-		transition: color 150ms, border-color 150ms, background-color 150ms, box-shadow 150ms;
+		transition:
+			color 150ms,
+			border-color 150ms,
+			background-color 150ms,
+			box-shadow 150ms;
 	}
 
 	.text-field-input:focus {
-		border-color: color-mix(in oklab, var(--sveltely-primary-color) 50%, white);
+		border-color: color-mix(in oklab, var(--sveltely-active-color) 50%, white);
 	}
 
 	.text-field-input::placeholder {
-		color: var(--color-zinc-400);
+		color: var(--sveltely-secondary-color);
 	}
 
 	.text-field-message {
-		color: var(--color-zinc-500);
+		color: var(--sveltely-secondary-color);
 		font-size: calc(var(--text-field-font-size, 0.875rem) * 0.857);
 		line-height: 1.25;
 	}

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

@@ -26,7 +26,8 @@
 		onPageChange?: (page: number, href: string) => void | Promise<void>;
 		showFirstLast?: boolean;
 		variant?: 'icon' | 'label';
-	} & StyleProps & Record<string, unknown> = $props();
+	} & StyleProps &
+		Record<string, unknown> = $props();
 
 	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
@@ -48,7 +49,7 @@
 	const hasNext = () => (typeof data.hasNext === 'boolean' ? data.hasNext : safePage() < maxPage());
 	const hasPrevious = () => safePage() > 1;
 	const buttonClass = () =>
-		`pagination-button action disabled:bg-zinc-200 disabled:text-zinc-500 inline-flex items-center justify-center leading-none ${
+		`pagination-button action disabled:bg-zinc-200 disabled:text-[var(--sveltely-secondary-color)] inline-flex items-center justify-center leading-none ${
 			variant === 'icon' ? 'pagination-button-icon' : ''
 		}`;
 
@@ -114,14 +115,8 @@
 
 	<form method="GET" style="display: inline;" novalidate onsubmit={handleSubmit}>
 		<input type="hidden" name="view" value={data.view} />
-			<input
-				id="page"
-				name="page"
-				type="number"
-				class="pagination-input"
-				value={safePage()}
-			/>
-		</form>
+		<input id="page" name="page" type="number" class="pagination-input" value={safePage()} />
+	</form>
 
 	<span>of {maxPage()}</span>
 
@@ -192,18 +187,20 @@
 
 	.pagination-button {
 		border-radius: var(--sveltely-border-radius);
-		background: var(--color-zinc-100);
-		padding:
-			calc(var(--sveltely-padding-y) * 0.67 * var(--pagination-scale))
+		background: var(--sveltely-inactive-color);
+		padding: calc(var(--sveltely-padding-y) * 0.67 * var(--pagination-scale))
 			calc(var(--sveltely-padding-x) * 0.67 * var(--pagination-scale));
 	}
 
 	.pagination-button-icon {
-		padding:
-			calc(var(--sveltely-padding-y) * 0.67 * var(--pagination-scale))
+		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));
+		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)
+		);
 	}
 
 	.pagination-button:disabled {
@@ -214,12 +211,11 @@
 	.pagination-input {
 		width: 10ch;
 		border-radius: var(--sveltely-border-radius);
-		background: var(--color-zinc-100);
+		background: var(--sveltely-inactive-color);
 		font-size: inherit;
 		line-height: 1.25;
 		outline: none;
-		padding:
-			calc(var(--sveltely-padding-y) * 0.33 * var(--pagination-scale))
+		padding: calc(var(--sveltely-padding-y) * 0.33 * var(--pagination-scale))
 			calc(var(--sveltely-padding-y) * 0.33 * var(--pagination-scale))
 			calc(var(--sveltely-padding-y) * 0.33 * var(--pagination-scale))
 			calc(var(--sveltely-padding-x) * var(--pagination-scale));

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

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 	import Popover from './Popover.svelte';
-	import SearchInput from '../SearchInput/SearchInput.svelte';
+	import SearchField from '../SearchField/SearchField.svelte';
 
 	let search = $state('');
 </script>
@@ -17,5 +17,5 @@
 		<span>Open popover</span>
 	{/snippet}
 
-	<SearchInput id="popover-demo-search" bind:value={search} placeholder="Type to search..." />
+	<SearchField id="popover-demo-search" bind:value={search} placeholder="Type to search..." />
 </Popover>

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,13 +1,43 @@
 <script lang="ts">
+	import { tick } from 'svelte';
 	import type { Snippet } from 'svelte';
 	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?: ScrollAxis;
 		contentStyles?: StyleProps;
+		onScroll?: (geometry: ScrollGeometry) => void;
+		scrollGradient?: boolean;
+		scrollGradientSize?: number | string;
 	} & StyleProps;
 
 	let {
@@ -15,6 +45,9 @@
 		viewport = $bindable<HTMLElement | null>(null),
 		axis = 'vertical',
 		contentStyles = {},
+		onScroll,
+		scrollGradient = true,
+		scrollGradientSize = '1rem',
 		fontSize,
 		paddingX,
 		paddingY,
@@ -39,6 +72,72 @@
 	});
 	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
@@ -47,11 +146,22 @@
 	class:scroll-view-vertical={axis === 'vertical'}
 	class:scroll-view-horizontal={axis === 'horizontal'}
 	class:scroll-view-both={axis === 'both'}
-	style={viewportStyle}
+	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>
@@ -65,6 +175,7 @@
 		color: var(--scroll-view-color, inherit);
 		scrollbar-gutter: stable;
 		overscroll-behavior: contain;
+		position: relative;
 	}
 
 	.scroll-view-vertical {
@@ -84,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));
 	}
 
@@ -102,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>