@x33025/sveltely 0.1.6 → 0.1.8

package/dist/actions/LoaderOverlay.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import Spinner from '../components/Library/Spinner/Spinner.svelte';
+	import VStack from '../components/Library/VStack/VStack.svelte';
+
+	type Props = {
+		text: string;
+	};
+
+	let { text }: Props = $props();
+</script>
+
+<div class="sveltely-loader-overlay" role="status" aria-live="polite" aria-label={text}>
+	<VStack align="center" justify="center" gap="var(--sveltely-gap)">
+		<Spinner />
+		<span class="sveltely-loader-text">{text}</span>
+	</VStack>
+</div>
+
+<style>
+	.sveltely-loader-overlay {
+		position: absolute;
+		inset: 0;
+		z-index: 20;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: inherit;
+		background: var(--sveltely-background-color, white);
+		color: var(--sveltely-primary-color, black);
+		padding: var(--sveltely-padding-y, 0.75rem) var(--sveltely-padding-x, 0.75rem);
+		pointer-events: auto;
+		text-align: center;
+	}
+
+	.sveltely-loader-text {
+		max-width: 100%;
+		overflow: hidden;
+		color: var(--sveltely-secondary-color, currentColor);
+		font-size: calc(var(--sveltely-font-size, 1rem) * 0.875);
+		line-height: 1.25;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>

package/dist/actions/LoaderOverlay.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    text: string;
+};
+declare const LoaderOverlay: import("svelte").Component<Props, {}, "">;
+type LoaderOverlay = ReturnType<typeof LoaderOverlay>;
+export default LoaderOverlay;

package/dist/actions/loader.d.ts

@@ -0,0 +1,11 @@
+import type { Action } from 'svelte/action';
+type LoaderTrigger = boolean | PromiseLike<unknown> | null | undefined;
+export type LoaderOptions = LoaderTrigger | [text: string, loading: LoaderTrigger] | {
+    text?: string;
+    loading?: LoaderTrigger;
+    active?: LoaderTrigger;
+    promise?: PromiseLike<unknown> | null;
+    disabled?: boolean;
+};
+export declare const loader: Action<HTMLElement, LoaderOptions>;
+export {};

package/dist/actions/loader.js

@@ -0,0 +1,117 @@
+import { mount, unmount } from 'svelte';
+import LoaderOverlay from './LoaderOverlay.svelte';
+const DEFAULT_TEXT = 'Loading';
+const isPromiseLike = (value) => typeof value === 'object' &&
+    value !== null &&
+    'then' in value &&
+    typeof value.then === 'function';
+const parseOptions = (value = false) => {
+    if (Array.isArray(value)) {
+        return {
+            text: value[0] || DEFAULT_TEXT,
+            loading: value[1],
+            disabled: false
+        };
+    }
+    if (typeof value === 'object' && value !== null && !isPromiseLike(value)) {
+        return {
+            text: value.text || DEFAULT_TEXT,
+            loading: value.loading ?? value.active ?? value.promise ?? false,
+            disabled: value.disabled ?? false
+        };
+    }
+    return {
+        text: DEFAULT_TEXT,
+        loading: value,
+        disabled: false
+    };
+};
+export const loader = (node, initialOptions = false) => {
+    if (typeof document === 'undefined') {
+        return {
+            update() { },
+            destroy() { }
+        };
+    }
+    const originalPosition = node.style.position;
+    const originalAriaBusy = node.getAttribute('aria-busy');
+    let options = parseOptions(initialOptions);
+    let overlay = null;
+    let overlayText = '';
+    let promiseVersion = 0;
+    let appliedPosition = false;
+    const ensureHostPosition = () => {
+        if (getComputedStyle(node).position !== 'static')
+            return;
+        node.style.position = 'relative';
+        appliedPosition = true;
+    };
+    const resetHostPosition = () => {
+        if (!appliedPosition)
+            return;
+        if (node.style.position === 'relative') {
+            node.style.position = originalPosition;
+        }
+        appliedPosition = false;
+    };
+    const show = () => {
+        ensureHostPosition();
+        node.setAttribute('aria-busy', 'true');
+        if (overlay && overlayText === options.text) {
+            return;
+        }
+        if (overlay) {
+            void unmount(overlay);
+        }
+        overlayText = options.text;
+        overlay = mount(LoaderOverlay, {
+            target: node,
+            props: {
+                text: options.text
+            }
+        });
+    };
+    const hide = () => {
+        if (overlay) {
+            void unmount(overlay);
+            overlay = null;
+            overlayText = '';
+        }
+        if (originalAriaBusy === null) {
+            node.removeAttribute('aria-busy');
+        }
+        else {
+            node.setAttribute('aria-busy', originalAriaBusy);
+        }
+        resetHostPosition();
+    };
+    const render = () => {
+        const currentVersion = ++promiseVersion;
+        if (options.disabled || !options.loading) {
+            hide();
+            return;
+        }
+        show();
+        if (!isPromiseLike(options.loading))
+            return;
+        options.loading.then(() => {
+            if (currentVersion === promiseVersion)
+                hide();
+        }, () => {
+            if (currentVersion === promiseVersion)
+                hide();
+        });
+    };
+    render();
+    return {
+        update(nextOptions = false) {
+            options = parseOptions(nextOptions);
+            render();
+        },
+        destroy() {
+            promiseVersion++;
+            hide();
+            resetHostPosition();
+        }
+    };
+};

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

@@ -20,5 +20,11 @@
 	<div class="text-3xl font-semibold text-[var(--sveltely-primary-color)]">
 		<AnimatedNumber {value} />
 	</div>
-	<Button label="Change number" variant="solid" onclick={bump} />
+	<Button
+		label="Change number"
+		background="var(--sveltely-active-color)"
+		borderColor="var(--sveltely-active-color)"
+		color="var(--sveltely-background-color)"
+		onclick={bump}
+	/>
 </div>

package/dist/components/Library/AsyncButton/AsyncButton.svelte

@@ -3,8 +3,9 @@
 	import type { Component } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import { tooltip } from '../../../actions/tooltip';
+	import Button from '../Button';
 	import Spinner from '../Spinner';
-	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+	import { extractStyleProps, type StyleProps } from '../../../style/surface';
 
 	type Props = {
 		icon?: Component<{ class?: string; size?: number | string }>;
@@ -45,6 +46,12 @@
 	const isControlledLoading = $derived(loading !== undefined);
 	const effectiveLoading = $derived(isControlledLoading ? loading : internalLoading);
 	const effectiveDisabled = $derived(disabled || (disableWhileLoading && effectiveLoading));
+	const buttonStyleProps = $derived({
+		...styleProps,
+		background: styleProps.background ?? 'var(--sveltely-active-color)',
+		borderColor: styleProps.borderColor ?? 'var(--sveltely-active-color)',
+		color: styleProps.color ?? 'var(--sveltely-background-color)'
+	});
 
 	const handleClick = async () => {
 		if (effectiveDisabled) return;
@@ -78,8 +85,6 @@
 	const toRem = (value: number | string | undefined) =>
 		value === undefined ? undefined : typeof value === 'number' ? `${value}rem` : value;
 
-	const triggerStyle = $derived.by(() => surfaceStyle(styleProps, 'async-button'));
-
 	const iconStyle = $derived.by(() => {
 		const declarations: string[] = [];
 
@@ -101,103 +106,47 @@
 	});
 </script>
 
-<button
-	{type}
-	use:tooltip={{ label: errorLabel ?? '', disabled: !errorLabel }}
-	class="async-button inline-flex items-center disabled:cursor-not-allowed disabled:opacity-50 {variant ===
-	'iconOnly'
-		? 'async-button-icon-only'
-		: ''}"
-	style={triggerStyle}
-	disabled={effectiveDisabled}
-	aria-busy={effectiveLoading}
-	aria-label={variant === 'iconOnly' ? label : undefined}
-	data-error={error ? 'true' : 'false'}
-	{...props}
-	onclick={handleClick}
->
-	<span class="async-button-icon-frame inline-grid shrink-0 place-items-center" style={iconStyle}>
-		{#if effectiveLoading}
-			<Spinner size={iconSize !== undefined ? toRem(iconSize) : 'var(--async-button-icon-size)'} />
-		{:else if error}
-			<CircleAlertIcon class="async-button-icon text-red-600" />
-		{:else if icon}
-			{@const Icon = icon}
-			<Icon class="async-button-icon" />
+<span use:tooltip={{ label: errorLabel ?? '', disabled: !errorLabel }} class="async-button">
+	<Button
+		{type}
+		{...buttonStyleProps}
+		disabled={effectiveDisabled}
+		aria-busy={effectiveLoading}
+		aria-label={variant === 'iconOnly' ? label : undefined}
+		data-error={error ? 'true' : 'false'}
+		{...props}
+		onclick={handleClick}
+	>
+		<span class="async-button-icon-frame inline-grid shrink-0 place-items-center" style={iconStyle}>
+			{#if effectiveLoading}
+				<Spinner size={iconSize !== undefined ? toRem(iconSize) : 'var(--button-icon-size)'} />
+			{:else if error}
+				<CircleAlertIcon class="async-button-icon text-red-600" />
+			{:else if icon}
+				{@const Icon = icon}
+				<Icon class="async-button-icon" />
+			{/if}
+		</span>
+		{#if variant === 'iconAndLabel'}
+			<span class="async-button-text" style={labelStyle}>{label}</span>
 		{/if}
-	</span>
-	{#if variant === 'iconAndLabel'}
-		<span class="async-button-text" style={labelStyle}>{label}</span>
-	{/if}
-</button>
+	</Button>
+</span>
 
 <style>
 	.async-button {
-		--async-button-font-size: var(--sveltely-font-size);
-		--async-button-scale: calc(var(--async-button-font-size) / 1rem);
-		--async-button-icon-size: calc(var(--async-button-font-size) * 1.143);
-		border: 1px solid var(--async-button-border-color, var(--sveltely-active-color));
-		border-radius: var(--async-button-border-radius, var(--sveltely-border-radius));
-		background: var(--async-button-background, var(--sveltely-active-color));
-		color: var(--async-button-color, var(--sveltely-background-color));
-		gap: var(--async-button-gap, var(--sveltely-gap));
-		font-size: var(--async-button-font-size);
-		line-height: 1.25;
-		padding: var(
-				--async-button-padding-y,
-				calc(var(--sveltely-padding-y) * 0.67 * var(--async-button-scale))
-			)
-			var(--async-button-padding-x, calc(var(--sveltely-padding-x) * var(--async-button-scale)));
-		transition:
-			color 150ms,
-			border-color 150ms,
-			background-color 150ms;
-	}
-
-	.async-button:hover {
-		background: var(--async-button-hover-background, var(--sveltely-active-hover-color));
-	}
-
-	.async-button-icon-only {
-		padding: var(
-				--async-button-padding-y,
-				calc(var(--sveltely-padding-y) * 0.67 * var(--async-button-scale))
-			)
-			var(
-				--async-button-padding-x,
-				calc(var(--sveltely-padding-x) * 0.67 * var(--async-button-scale))
-			);
-		min-width: calc(
-			(
-					var(
-							--async-button-padding-x,
-							calc(var(--sveltely-padding-x) * 0.67 * var(--async-button-scale))
-						) *
-						2
-				) +
-				1rem
-		);
-		min-height: calc(
-			(
-					var(
-							--async-button-padding-y,
-							calc(var(--sveltely-padding-y) * 0.67 * var(--async-button-scale))
-						) *
-						2
-				) +
-				1rem
-		);
+		display: inline-flex;
 	}
 
 	.async-button-icon-frame {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		width: var(--async-button-icon-size);
-		height: var(--async-button-icon-size);
+		width: var(--button-icon-size);
+		height: var(--button-icon-size);
 	}
 
-	.async-button-icon {
+	:global(.async-button-icon) {
 		width: 100%;
 		height: 100%;
 	}

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

@@ -1,7 +1,7 @@
 <script module lang="ts">
 	export const demo = {
 		name: 'Button',
-		description: 'Token-aware button primitive with optional icon support.',
+		description: 'Token-aware button primitive with composable content.',
 		columnSpan: 2
 	};
 </script>
@@ -14,6 +14,14 @@
 
 <HStack align="center" gap={0.75}>
 	<Button label="Default" />
-	<Button label="Solid" variant="solid" />
-	<Button icon={SaveIcon} label="With icon" />
+	<Button
+		label="Solid"
+		background="var(--sveltely-active-color)"
+		borderColor="var(--sveltely-active-color)"
+		color="var(--sveltely-background-color)"
+	/>
+	<Button>
+		<SaveIcon />
+		<span>With icon</span>
+	</Button>
 </HStack>

package/dist/components/Library/Button/Button.svelte

@@ -1,48 +1,33 @@
 <script lang="ts">
-	import type { Component, Snippet } from 'svelte';
+	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
 
 	type Props = {
 		children?: Snippet;
 		label?: string;
-		icon?: Component<{ class?: string; size?: number | string }>;
-		iconSize?: number | string;
-		iconColor?: string;
-		variant?: 'default' | 'solid' | 'ghost';
 	} & StyleProps &
 		Omit<HTMLButtonAttributes, 'children' | 'class' | 'style'>;
 
-	let {
-		children,
-		label,
-		icon,
-		iconSize,
-		iconColor,
-		variant = 'default',
-		disabled = false,
-		type = 'button',
-		...restProps
-	}: Props = $props();
+	let { children, label, disabled = false, type = 'button', ...restProps }: Props = $props();
 
 	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
 	const props = $derived(extractedStyleProps.restProps);
 
-	const toRem = (value: number | string | undefined) =>
-		value === undefined ? undefined : typeof value === 'number' ? `${value}rem` : value;
-
-	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'button'));
-	const iconStyle = $derived.by(() => {
-		const declarations: string[] = [];
-		if (iconColor !== undefined) {
-			declarations.push(`color: ${iconColor};`);
+	const rootStyle = $derived.by(() => {
+		const { background, borderColor, color, ...surfaceProps } = styleProps;
+		const declarations = [surfaceStyle(surfaceProps, 'button')];
+		if (background !== undefined) {
+			declarations.push(`--button-background: ${background};`);
+		}
+		if (borderColor !== undefined) {
+			declarations.push(`--button-border-color: ${borderColor};`);
 		}
-		if (iconSize !== undefined) {
-			const size = toRem(iconSize);
-			declarations.push(`width: ${size};`, `height: ${size};`);
+		if (color !== undefined) {
+			declarations.push(`--button-color: ${color};`);
 		}
-		return declarations.join(' ');
+		return declarations.filter(Boolean).join(' ');
 	});
 	const iconOnly = $derived(!children && !label);
 </script>
@@ -52,18 +37,10 @@
 	class="button inline-flex items-center justify-center disabled:cursor-not-allowed disabled:opacity-50 {iconOnly
 		? 'button-icon-only'
 		: ''}"
-	data-variant={variant}
 	style={rootStyle}
 	{disabled}
 	{...props}
 >
-	{#if icon}
-		{@const Icon = icon}
-		<span class="button-icon-frame inline-grid shrink-0 place-items-center" style={iconStyle}>
-			<Icon class="button-icon" />
-		</span>
-	{/if}
-
 	{#if children}
 		{@render children()}
 	{:else if label}
@@ -91,27 +68,15 @@
 			background-color 150ms;
 	}
 
-	.button[data-variant='default']:hover {
-		background: var(--button-hover-background, var(--sveltely-hover-color));
-	}
-
-	.button[data-variant='solid'] {
-		border-color: var(--button-solid-border-color, var(--sveltely-active-color));
-		background: var(--button-solid-background, var(--sveltely-active-color));
-		color: var(--button-solid-color, var(--sveltely-background-color));
-	}
-
-	.button[data-variant='solid']:hover {
-		background: var(--button-solid-hover-background, var(--sveltely-active-hover-color));
-	}
-
-	.button[data-variant='ghost'] {
-		border-color: transparent;
-		background: transparent;
-	}
-
-	.button[data-variant='ghost']:hover {
-		background: var(--button-ghost-hover-background, var(--sveltely-hover-color));
+	.button:hover {
+		background: var(
+			--button-hover-background,
+			color-mix(
+				in oklab,
+				var(--button-background, var(--sveltely-background-color)) 88%,
+				var(--button-color, var(--sveltely-primary-color))
+			)
+		);
 	}
 
 	.button-icon-only {
@@ -127,16 +92,9 @@
 		);
 	}
 
-	.button-icon-frame {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
+	.button :global(svg) {
 		width: var(--button-icon-size);
 		height: var(--button-icon-size);
-	}
-
-	.button-icon {
-		width: 100%;
-		height: 100%;
+		flex-shrink: 0;
 	}
 </style>

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

@@ -1,17 +1,10 @@
-import type { Component, Snippet } from 'svelte';
+import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import { type StyleProps } from '../../../style/surface';
 type Props = {
     children?: Snippet;
     label?: string;
-    icon?: Component<{
-        class?: string;
-        size?: number | string;
-    }>;
-    iconSize?: number | string;
-    iconColor?: string;
-    variant?: 'default' | 'solid' | 'ghost';
 } & StyleProps & Omit<HTMLButtonAttributes, 'children' | 'class' | 'style'>;
-declare const Button: Component<Props, {}, "">;
+declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

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

@@ -32,7 +32,6 @@
 		shrink,
 		basis,
 		border,
-		overflow,
 		align,
 		justify,
 		fontSize,
@@ -58,7 +57,6 @@
 		shrink,
 		basis,
 		border,
-		overflow,
 		align,
 		justify
 	});

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

@@ -0,0 +1,74 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Loader',
+		description: 'Overlay loading state for any component.',
+		columnSpan: 1,
+		rowSpan: 2
+	};
+</script>
+
+<script lang="ts">
+	import { loader } from '../../../actions/loader';
+	import Button from '../Button';
+
+	let pending = $state<Promise<void> | null>(null);
+
+	const startLoading = () => {
+		const next = new Promise<void>((resolve) => {
+			setTimeout(resolve, 1600);
+		});
+
+		pending = next;
+		next.finally(() => {
+			if (pending === next) {
+				pending = null;
+			}
+		});
+	};
+</script>
+
+<div class="loader-demo" use:loader={{ text: 'Loading preview...', promise: pending }}>
+	<div class="loader-demo-copy">
+		<strong>Preview panel</strong>
+		<span>Click the button to cover this component with the loader overlay.</span>
+	</div>
+	<Button label="Show loader" onclick={startLoading} disabled={pending !== null} />
+</div>
+
+<style>
+	.loader-demo {
+		display: flex;
+		min-height: 8rem;
+		width: 100%;
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: var(--sveltely-gap);
+		border: 1px solid var(--sveltely-border-color);
+		border-radius: var(--sveltely-border-radius);
+		background: color-mix(
+			in oklab,
+			var(--sveltely-background-color) 94%,
+			var(--sveltely-primary-color)
+		);
+		padding: var(--sveltely-padding-y) var(--sveltely-padding-x);
+	}
+
+	.loader-demo-copy {
+		display: flex;
+		min-width: 0;
+		flex-direction: column;
+		gap: calc(var(--sveltely-gap) * 0.5);
+	}
+
+	.loader-demo-copy strong {
+		font-size: var(--sveltely-font-size);
+		line-height: 1.25;
+	}
+
+	.loader-demo-copy span {
+		color: var(--sveltely-secondary-color);
+		font-size: calc(var(--sveltely-font-size) * 0.875);
+		line-height: 1.3;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+export declare const demo: {
+    name: string;
+    description: string;
+    columnSpan: number;
+    rowSpan: number;
+};
+declare const Loader: import("svelte").Component<Record<string, never>, {}, "">;
+type Loader = ReturnType<typeof Loader>;
+export default Loader;

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

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { tick } from 'svelte';
 	import type { Snippet } from 'svelte';
-	import { surfaceStyle, type StyleProps } from '../../../style/surface';
+	import { extractLayoutProps, layoutStyle, type LayoutProps } from '../../../style/layout';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
 	import type { ScrollAxis } from '../../../style/scroll';
 
 	export type ScrollGeometry = {
@@ -38,7 +39,8 @@
 		onScroll?: (geometry: ScrollGeometry) => void;
 		scrollGradient?: boolean;
 		scrollGradientSize?: number | string;
-	} & StyleProps;
+	} & LayoutProps &
+		StyleProps;
 
 	let {
 		children,
@@ -48,36 +50,25 @@
 		onScroll,
 		scrollGradient = true,
 		scrollGradientSize = '1rem',
-		fontSize,
-		paddingX,
-		paddingY,
-		gap,
-		borderRadius,
-		inset,
-		background,
-		borderColor,
-		color
+		...restProps
 	}: Props = $props();
 
-	const styleProps = $derived({
-		fontSize,
-		paddingX,
-		paddingY,
-		gap,
-		borderRadius,
-		inset,
-		background,
-		borderColor,
-		color
-	});
+	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 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};`
 	);
+	const rootStyle = $derived.by(() =>
+		[layoutStyle(layoutProps), viewportStyle, scrollGradientStyle].filter(Boolean).join(' ')
+	);
+	let canScrollToTop = $state(false);
+	let canScrollToBottom = $state(false);
+	const scrollGradientEnabled = $derived(scrollGradient && axis !== 'horizontal');
 
 	function syncScrollGradient(geometry: ScrollGeometry) {
 		if (!scrollGradientEnabled) return;
@@ -146,10 +137,10 @@
 	class:scroll-view-vertical={axis === 'vertical'}
 	class:scroll-view-horizontal={axis === 'horizontal'}
 	class:scroll-view-both={axis === 'both'}
-	class:scroll-view-gradient={scrollGradientEnabled}
+	class:scroll-view-has-gradient={scrollGradientEnabled}
 	class:scroll-view-can-scroll-up={canScrollToTop}
 	class:scroll-view-can-scroll-down={canScrollToBottom}
-	style={[viewportStyle, scrollGradientStyle].filter(Boolean).join(' ')}
+	style={rootStyle}
 	onscroll={handleScroll}
 	onwheel={handleWheel}
 >

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import { type LayoutProps } from '../../../style/layout';
 import { type StyleProps } from '../../../style/surface';
 import type { ScrollAxis } from '../../../style/scroll';
 export type ScrollGeometry = {
@@ -34,7 +35,7 @@ type Props = {
     onScroll?: (geometry: ScrollGeometry) => void;
     scrollGradient?: boolean;
     scrollGradientSize?: number | string;
-} & StyleProps;
+} & LayoutProps & StyleProps;
 declare const ScrollView: import("svelte").Component<Props, {}, "viewport">;
 type ScrollView = ReturnType<typeof ScrollView>;
 export default ScrollView;

package/dist/components/Local/ComponentGrid.svelte

@@ -19,20 +19,31 @@
 	let { demos }: Props = $props();
 </script>
 
-<Grid
-	columns="repeat(auto-fit, minmax(min(100%, 18rem), 1fr))"
-	autoRows={14}
-	gap={1}
-	paddingX="calc(var(--sveltely-padding-x) * 2)"
-	paddingY="calc(var(--sveltely-padding-y) * 2)"
-	overflow="auto"
->
-	{#each demos as entry}
-		{@const DemoComponent = entry.component}
-		<GridItem columnSpan={entry.columnSpan ?? 1} rowSpan={entry.rowSpan ?? 1}>
-			<HeroCard title={entry.name} description={entry.description}>
-				<DemoComponent />
-			</HeroCard>
-		</GridItem>
-	{/each}
-</Grid>
+<div class="component-grid-scroll">
+	<Grid
+		columns="repeat(auto-fit, minmax(min(100%, 18rem), 1fr))"
+		autoRows={14}
+		gap={1}
+		paddingX="calc(var(--sveltely-padding-x) * 2)"
+		paddingY="calc(var(--sveltely-padding-y) * 2)"
+	>
+		{#each demos as entry (entry.name)}
+			{@const DemoComponent = entry.component}
+			<GridItem columnSpan={entry.columnSpan ?? 1} rowSpan={entry.rowSpan ?? 1}>
+				<HeroCard title={entry.name} description={entry.description}>
+					<DemoComponent />
+				</HeroCard>
+			</GridItem>
+		{/each}
+	</Grid>
+</div>
+
+<style>
+	.component-grid-scroll {
+		width: 100%;
+		height: 100%;
+		min-width: 0;
+		min-height: 0;
+		overflow: auto;
+	}
+</style>

package/dist/components/Local/HeroCard.svelte

@@ -32,13 +32,13 @@
 			<p class="max-w-3xl text-sm text-[var(--sveltely-secondary-color)]">{description}</p>
 		{/if}
 	{/if}
-	<VStack grow shrink overflow="hidden" paddingX={0} paddingY={0}>
+	<div class="hero-card-content">
 		{#if children}
 			<HStack minWidth="min-content" minHeight="100%" align="center" justify="center">
 				{@render children()}
 			</HStack>
 		{/if}
-	</VStack>
+	</div>
 </VStack>
 
 <style>
@@ -50,4 +50,11 @@
 	p {
 		max-width: none;
 	}
+
+	.hero-card-content {
+		min-width: 0;
+		min-height: 0;
+		flex: 1 1 0;
+		overflow: hidden;
+	}
 </style>

package/dist/index.d.ts

@@ -2,8 +2,10 @@ export { motion, hover } from './actions/motion';
 export { portalHost, portalContent } from './actions/portal';
 export { tooltip } from './actions/tooltip';
 export type { TooltipOptions } from './actions/tooltip';
-export { LayoutAlignment, LayoutJustification, LayoutOverflow, LayoutSize } from './style/layout';
-export type { LayoutAlignmentValue, LayoutJustificationValue, LayoutOverflowValue, LayoutProps, LayoutSizeValue } from './style/layout';
+export { loader } from './actions/loader';
+export type { LoaderOptions } from './actions/loader';
+export { LayoutAlignment, LayoutJustification, LayoutSize } from './style/layout';
+export type { LayoutAlignmentValue, LayoutJustificationValue, LayoutProps, LayoutSizeValue } from './style/layout';
 export { LabelOrientation } from './style/label';
 export type { LabelOrientationValue } from './style/label';
 export { ImageFit, ImageLoading } from './style/media';

package/dist/index.js

@@ -1,7 +1,8 @@
 export { motion, hover } from './actions/motion';
 export { portalHost, portalContent } from './actions/portal';
 export { tooltip } from './actions/tooltip';
-export { LayoutAlignment, LayoutJustification, LayoutOverflow, LayoutSize } from './style/layout';
+export { loader } from './actions/loader';
+export { LayoutAlignment, LayoutJustification, LayoutSize } from './style/layout';
 export { LabelOrientation } from './style/label';
 export { ImageFit, ImageLoading } from './style/media';
 export { ScrollAxis } from './style/scroll';

package/dist/style/layout.d.ts

@@ -3,13 +3,6 @@ export declare const LayoutSize: {
     readonly full: "full";
     readonly fit: "fit";
 };
-export declare const LayoutOverflow: {
-    readonly visible: "visible";
-    readonly hidden: "hidden";
-    readonly clip: "clip";
-    readonly auto: "auto";
-    readonly scroll: "scroll";
-};
 export declare const LayoutAlignment: {
     readonly start: "start";
     readonly center: "center";
@@ -26,11 +19,9 @@ export declare const LayoutJustification: {
     readonly evenly: "evenly";
 };
 export type LayoutSizeValue = (typeof LayoutSize)[keyof typeof LayoutSize];
-export type LayoutOverflowValue = (typeof LayoutOverflow)[keyof typeof LayoutOverflow];
 export type LayoutAlignmentValue = (typeof LayoutAlignment)[keyof typeof LayoutAlignment];
 export type LayoutJustificationValue = (typeof LayoutJustification)[keyof typeof LayoutJustification];
 export type LayoutSize = StringWithAutocomplete<LayoutSizeValue> | number;
-export type LayoutOverflow = LayoutOverflowValue;
 export type LayoutAlignment = LayoutAlignmentValue;
 export type LayoutJustification = LayoutJustificationValue;
 export type LayoutProps = {
@@ -45,7 +36,6 @@ export type LayoutProps = {
     shrink?: boolean | number;
     basis?: number | string;
     border?: boolean | string;
-    overflow?: LayoutOverflow;
     align?: LayoutAlignment;
     justify?: LayoutJustification;
 };

package/dist/style/layout.js

@@ -2,13 +2,6 @@ export const LayoutSize = {
     full: 'full',
     fit: 'fit'
 };
-export const LayoutOverflow = {
-    visible: 'visible',
-    hidden: 'hidden',
-    clip: 'clip',
-    auto: 'auto',
-    scroll: 'scroll'
-};
 export const LayoutAlignment = {
     start: 'start',
     center: 'center',
@@ -36,7 +29,6 @@ const LAYOUT_PROP_KEYS = new Set([
     'shrink',
     'basis',
     'border',
-    'overflow',
     'align',
     'justify'
 ]);
@@ -115,9 +107,6 @@ export const layoutStyle = (styles) => {
             : `1px solid ${styles.border}`;
         declarations.push(`border: ${borderValue};`);
     }
-    if (styles.overflow !== undefined) {
-        declarations.push(`overflow: ${styles.overflow};`);
-    }
     if (styles.align !== undefined) {
         declarations.push(`align-items: ${alignValues[styles.align]};`);
     }

package/dist/style.css

@@ -212,6 +212,9 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.1.6",
+	"version": "0.1.8",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",