@x33025/sveltely 0.1.4 → 0.1.7

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/Dropdown/Dropdown.demo.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <script lang="ts">
-	import { CheckIcon, ChevronDownIcon, PlusIcon, UserRoundXIcon } from '@lucide/svelte';
+	import { CheckIcon, PlusIcon, UserRoundXIcon } from '@lucide/svelte';
 	import SearchField from '../SearchField';
 	import ScrollView, { type ScrollGeometry } from '../ScrollView';
 	import Dropdown from './index';
@@ -117,31 +117,23 @@
 			selectedLabel={selectedWebsite?.name ?? null}
 			showCheck={false}
 		>
-			{#snippet trigger(dropdown)}
-				<button
-					use:dropdown.useTrigger
-					type="button"
-					class="hstack w-full items-center gap-2 rounded-full border px-3 py-2 pr-2 text-left text-sm"
-					style="border-color: var(--sveltely-border-color); background: var(--sveltely-background-color);"
-					aria-expanded={dropdown.open}
-					aria-haspopup="dialog"
-					onclick={dropdown.toggle}
-				>
+			{#snippet trigger()}
+				<Dropdown.Trigger>
 					{#if selectedWebsite}
-						<span class="min-w-0 flex-1 truncate text-[var(--sveltely-primary-color)]"
-							>{selectedWebsite.name}</span
-						>
-						{#if selectedWebsite.domain}
-							<span class="max-w-32 truncate text-xs text-[var(--sveltely-secondary-color)]"
-								>{selectedWebsite.domain}</span
+						<span class="hstack min-w-0 items-center gap-2">
+							<span class="truncate text-[var(--sveltely-primary-color)]"
+								>{selectedWebsite.name}</span
 							>
-						{/if}
+							{#if selectedWebsite.domain}
+								<span class="truncate text-xs text-[var(--sveltely-secondary-color)]">
+									{selectedWebsite.domain}
+								</span>
+							{/if}
+						</span>
 					{:else}
-						<span class="min-w-0 flex-1 text-[var(--sveltely-secondary-color)]">Select website</span
-						>
+						<span class="text-[var(--sveltely-secondary-color)]">Select website</span>
 					{/if}
-					<ChevronDownIcon size={14} class="shrink-0 text-[var(--sveltely-secondary-color)]" />
-				</button>
+				</Dropdown.Trigger>
 			{/snippet}
 
 			<SearchField bind:value={websiteQuery} placeholder="Search websites..." />

package/dist/components/Library/Dropdown/Dropdown.svelte

@@ -4,7 +4,11 @@
 	import Floating from '../Floating/Floating.svelte';
 	import { surfaceStyle, type StyleProps } from '../../../style/surface';
 	import type { Anchor } from '../../../utils/positioning';
-	import { setDropdownContext, type DropdownTriggerState } from './context';
+	import {
+		setDropdownContext,
+		setDropdownTriggerContext,
+		type DropdownTriggerState
+	} from './context';
 
 	type Props = {
 		value?: TValue | null;
@@ -80,7 +84,7 @@
 >
 	{#snippet trigger(floating)}
 		{#if triggerContent}
-			{@render triggerContent({
+			{@const triggerState = setDropdownTriggerContext({
 				useTrigger: floating.useTrigger,
 				open: floating.open,
 				value,
@@ -91,20 +95,32 @@
 				openPanel: floating.openPanel,
 				closePanel: floating.closePanel
 			})}
+			{@render triggerContent(triggerState)}
 		{:else}
+			{@const triggerState = {
+				useTrigger: floating.useTrigger,
+				open: floating.open,
+				value,
+				selectedLabel: triggerText,
+				placeholder,
+				disabled,
+				toggle: floating.toggle,
+				openPanel: floating.openPanel,
+				closePanel: floating.closePanel
+			}}
 			<button
-				use:floating.useTrigger
+				use:triggerState.useTrigger
 				type="button"
 				class="dropdown-trigger justify-between"
 				aria-label={label}
-				aria-disabled={disabled}
-				{disabled}
+				aria-disabled={triggerState.disabled}
+				disabled={triggerState.disabled}
 				style={dropdownStyle}
-				aria-expanded={floating.open}
+				aria-expanded={triggerState.open}
 				aria-haspopup="dialog"
-				onclick={floating.toggle}
+				onclick={triggerState.toggle}
 			>
-				<span class="dropdown-trigger-label">{triggerText}</span>
+				<span class="dropdown-trigger-label">{triggerState.selectedLabel}</span>
 				<ChevronDownIcon class="size-4 text-[var(--sveltely-secondary-color)]" />
 			</button>
 		{/if}

package/dist/components/Library/Dropdown/Trigger.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { ChevronDownIcon } from '@lucide/svelte';
+	import type { Snippet } from 'svelte';
+	import { getDropdownTriggerContext, type DropdownTriggerState } from './context';
+
+	type Props = {
+		children?: Snippet<[DropdownTriggerState]>;
+	};
+
+	let { children }: Props = $props();
+
+	const dropdown = getDropdownTriggerContext();
+</script>
+
+<button
+	use:dropdown.useTrigger
+	type="button"
+	class="dropdown-trigger justify-between"
+	aria-disabled={dropdown.disabled}
+	disabled={dropdown.disabled}
+	aria-expanded={dropdown.open}
+	aria-haspopup="dialog"
+	onclick={dropdown.toggle}
+>
+	<span class="dropdown-trigger-label">
+		{#if children}
+			{@render children(dropdown)}
+		{:else}
+			{dropdown.selectedLabel}
+		{/if}
+	</span>
+	<ChevronDownIcon class="size-4 text-[var(--sveltely-secondary-color)]" />
+</button>
+
+<style>
+	.dropdown-trigger {
+		display: inline-flex;
+		min-width: 8rem;
+		max-width: 100%;
+		align-items: center;
+		border: 1px solid var(--sveltely-border-color);
+		border-radius: var(--sveltely-border-radius);
+		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;
+		text-align: left;
+		transition:
+			color 150ms,
+			border-color 150ms,
+			background-color 150ms;
+	}
+
+	.dropdown-trigger-label {
+		min-width: 0;
+		flex: 1 1 auto;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.dropdown-trigger :global(svg) {
+		flex: 0 0 auto;
+	}
+
+	.dropdown-trigger:hover {
+		background: var(--sveltely-hover-color);
+	}
+</style>

package/dist/components/Library/Dropdown/Trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import { type DropdownTriggerState } from './context';
+type Props = {
+    children?: Snippet<[DropdownTriggerState]>;
+};
+declare const Trigger: import("svelte").Component<Props, {}, "">;
+type Trigger = ReturnType<typeof Trigger>;
+export default Trigger;

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

@@ -32,3 +32,5 @@ export type DropdownContext<TValue = DropdownValue> = {
 };
 export declare const setDropdownContext: <TValue>(context: DropdownContext<TValue>) => void;
 export declare const getDropdownContext: <TValue>() => DropdownContext<TValue>;
+export declare const setDropdownTriggerContext: <TValue>(context: DropdownTriggerState<TValue>) => DropdownTriggerState<TValue>;
+export declare const getDropdownTriggerContext: <TValue>() => DropdownTriggerState<TValue>;

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

@@ -1,6 +1,12 @@
 import { getContext, setContext } from 'svelte';
 const dropdownContextKey = Symbol('dropdown');
+const dropdownTriggerContextKey = Symbol('dropdown-trigger');
 export const setDropdownContext = (context) => {
     setContext(dropdownContextKey, context);
 };
 export const getDropdownContext = () => getContext(dropdownContextKey);
+export const setDropdownTriggerContext = (context) => {
+    setContext(dropdownTriggerContextKey, context);
+    return context;
+};
+export const getDropdownTriggerContext = () => getContext(dropdownTriggerContextKey);

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

@@ -3,11 +3,13 @@ import Action from './Action.svelte';
 import Divider from './Divider.svelte';
 import Item from './Item.svelte';
 import Section from './Section.svelte';
+import Trigger from './Trigger.svelte';
 declare const Dropdown: typeof DropdownComponent & {
     Action: typeof Action;
     Divider: typeof Divider;
     Item: typeof Item;
     Section: typeof Section;
+    Trigger: typeof Trigger;
 };
 export default Dropdown;
 export type { DropdownActionState, DropdownItemState, DropdownTriggerState } from './context';

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

@@ -3,9 +3,11 @@ import Action from './Action.svelte';
 import Divider from './Divider.svelte';
 import Item from './Item.svelte';
 import Section from './Section.svelte';
+import Trigger from './Trigger.svelte';
 const Dropdown = DropdownComponent;
 Dropdown.Action = Action;
 Dropdown.Divider = Divider;
 Dropdown.Item = Item;
 Dropdown.Section = Section;
+Dropdown.Trigger = Trigger;
 export default Dropdown;

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/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,8 @@ 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 { 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,7 @@
 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 { 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

@@ -298,9 +298,6 @@
   .max-w-3xl {
     max-width: var(--container-3xl);
   }
-  .max-w-32 {
-    max-width: calc(var(--spacing) * 32);
-  }
   .max-w-md {
     max-width: var(--container-md);
   }
@@ -412,9 +409,6 @@
   .rounded {
     border-radius: 0.25rem;
   }
-  .rounded-full {
-    border-radius: calc(infinity * 1px);
-  }
   .rounded-md {
     border-radius: var(--radius-md);
   }
@@ -458,18 +452,9 @@
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
-  .px-3 {
-    padding-inline: calc(var(--spacing) * 3);
-  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
-  .py-2 {
-    padding-block: calc(var(--spacing) * 2);
-  }
-  .pr-2 {
-    padding-right: calc(var(--spacing) * 2);
-  }
   .text-left {
     text-align: left;
   }

package/package.json

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