@x33025/sveltely 0.1.6 → 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/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/package.json

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