@x33025/sveltely 0.1.17 → 0.1.19

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

@@ -130,6 +130,11 @@
 	}
 
 	function drawOutlineSurface() {
+		if (isDrawing) {
+			outlineContext?.clearRect(0, 0, viewportWidth, viewportHeight);
+			return;
+		}
+
 		drawMarchingAnts({
 			context: outlineContext,
 			contours,
@@ -144,14 +149,14 @@
 		drawOutlineSurface();
 		context.clearRect(0, 0, viewportWidth, viewportHeight);
 		if (!surfaceCanvas) return;
-		const primaryColor = canvas
-			? getComputedStyle(canvas).getPropertyValue('--sveltely-active-color').trim() ||
-				'var(--sveltely-active-color)'
-			: 'var(--sveltely-active-color)';
+		const maskColor = canvas
+			? getComputedStyle(canvas).getPropertyValue('--sveltely-control-active-color').trim() ||
+				'var(--sveltely-control-active-color)'
+			: 'var(--sveltely-control-active-color)';
 		context.save();
 		context.drawImage(surfaceCanvas, 0, 0, viewportWidth, viewportHeight);
 		context.globalCompositeOperation = 'source-in';
-		context.fillStyle = primaryColor;
+		context.fillStyle = maskColor;
 		context.globalAlpha = 0.32;
 		context.fillRect(0, 0, viewportWidth, viewportHeight);
 		context.restore();
@@ -160,7 +165,7 @@
 			context.save();
 			context.drawImage(outlineCanvas, 0, 0, viewportWidth, viewportHeight);
 			context.globalCompositeOperation = 'source-in';
-			context.fillStyle = primaryColor;
+			context.fillStyle = maskColor;
 			context.globalAlpha = 0.9;
 			context.fillRect(0, 0, viewportWidth, viewportHeight);
 			context.restore();
@@ -253,6 +258,7 @@
 		isDrawing = false;
 		lastPoint = null;
 		rebuildContours();
+		drawFrame();
 		emitMask();
 	}
 

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

@@ -1,7 +1,7 @@
 <script module lang="ts">
 	export const demo = {
 		name: 'Label',
-		description: 'Form label wrapper with top and left orientation.',
+		description: 'Form label wrapper with top, leading, and trailing placement.',
 		columnSpan: 2
 	};
 </script>
@@ -9,20 +9,26 @@
 <script lang="ts">
 	import { HashIcon, UserIcon } from '@lucide/svelte';
 	import HStack from '../HStack';
+	import Switch from '../Switch';
 	import NumberField from '../NumberField';
 	import TextField from '../TextField';
 	import Label from './Label.svelte';
 
 	let name = $state('');
 	let amount = $state<number | null>(35);
+	let enabled = $state(true);
 </script>
 
 <HStack gap={10} align="center">
-	<Label label="Name" icon={UserIcon} orientation="top">
+	<Label label="Name" icon={UserIcon} orientation="top" width="fit">
 		<TextField bind:value={name} placeholder="Sveltely" />
 	</Label>
 
-	<Label label="Amount" icon={HashIcon} orientation="left">
+	<Label label="Amount" icon={HashIcon} orientation="leading" width="fit">
 		<NumberField bind:value={amount} min={0} max={100} />
 	</Label>
+
+	<Label label="Enabled" orientation="trailing" width="fit">
+		<Switch bind:checked={enabled} />
+	</Label>
 </HStack>

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

@@ -125,7 +125,7 @@
 		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(--sveltely-primary-color));
+		color: var(--label-color, var(--sveltely-text-primary-color));
 		font-size: var(--label-font-size);
 		padding: var(--label-padding-y, 0px) var(--label-padding-x, 0px);
 	}
@@ -135,11 +135,17 @@
 		align-items: stretch;
 	}
 
-	.label[data-orientation='left'] {
+	.label[data-orientation='leading'],
+	.label[data-orientation='trailing'] {
 		flex-direction: row;
 		align-items: center;
 	}
 
+	.label[data-orientation='trailing'] {
+		flex-direction: row-reverse;
+		justify-content: flex-end;
+	}
+
 	.label-heading {
 		display: inline-flex;
 		min-width: max-content;

package/dist/components/Library/Link/Link.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { tooltip as tooltipAction } from '../../../actions/tooltip';
 	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+	import type { TooltipProps } from '../../../style/tooltip';
 
 	type Props = {
 		children?: Snippet;
 		label?: string;
 	} & StyleProps &
-		Omit<HTMLAnchorAttributes, 'children' | 'class' | 'style'> & {
-			class?: HTMLAnchorAttributes['class'];
-		};
+		TooltipProps &
+		Omit<HTMLAnchorAttributes, 'children' | 'class' | 'style'>;
 
-	let { children, label, class: className = '', ...restProps }: Props = $props();
+	let { children, label, tooltip, ...restProps }: Props = $props();
 
 	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
@@ -35,11 +36,10 @@
 </script>
 
 <a
-	class="link inline-flex items-center justify-center {iconOnly
-		? 'link-icon-only'
-		: ''} {className}"
+	class="link inline-flex items-center justify-center {iconOnly ? 'link-icon-only' : ''}"
 	style={rootStyle}
 	{...props}
+	use:tooltipAction={tooltip}
 >
 	{#if children}
 		{@render children()}
@@ -55,8 +55,8 @@
 		--link-icon-size: calc(var(--link-font-size) * 1.143);
 		border: 1px solid var(--link-border-color, var(--sveltely-border-color));
 		border-radius: var(--link-border-radius, var(--sveltely-border-radius));
-		background: var(--link-background, var(--sveltely-background-color));
-		color: var(--link-color, var(--sveltely-primary-color));
+		background: var(--link-background, var(--sveltely-control-background-color));
+		color: var(--link-color, var(--sveltely-text-primary-color));
 		gap: var(--link-gap, var(--sveltely-gap));
 		font-size: var(--link-font-size);
 		line-height: 1.25;
@@ -65,19 +65,7 @@
 		text-decoration: none;
 		transition:
 			color 150ms,
-			border-color 150ms,
-			background-color 150ms;
-	}
-
-	.link:hover {
-		background: var(
-			--link-hover-background,
-			color-mix(
-				in oklab,
-				var(--link-background, var(--sveltely-background-color)) 88%,
-				var(--link-color, var(--sveltely-primary-color))
-			)
-		);
+			border-color 150ms;
 	}
 
 	.link-icon-only {

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

@@ -1,12 +1,11 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes } from 'svelte/elements';
 import { type StyleProps } from '../../../style/surface';
+import type { TooltipProps } from '../../../style/tooltip';
 type Props = {
     children?: Snippet;
     label?: string;
-} & StyleProps & Omit<HTMLAnchorAttributes, 'children' | 'class' | 'style'> & {
-    class?: HTMLAnchorAttributes['class'];
-};
+} & StyleProps & TooltipProps & Omit<HTMLAnchorAttributes, 'children' | 'class' | 'style'>;
 declare const Link: import("svelte").Component<Props, {}, "">;
 type Link = ReturnType<typeof Link>;
 export default Link;

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

@@ -28,10 +28,16 @@
 </script>
 
 <ScrollView
-	background="color-mix(in oklab, var(--sveltely-background-color) 94%, var(--sveltely-primary-color))"
+	background="color-mix(in oklab, var(--sveltely-background-color) 94%, var(--sveltely-text-primary-color))"
 	borderRadius={7.5}
 	scrollGradient={false}
-	loader={{ text: 'Loading preview...', promise: pending }}
+	loader={{
+		text: 'Loading preview...',
+		promise: pending,
+		background:
+			'color-mix(in oklab, var(--sveltely-background-color) 94%, var(--sveltely-text-primary-color))',
+		fontSize: 12
+	}}
 >
 	<div class="loader-demo">
 		<div class="loader-demo-copy">
@@ -67,7 +73,7 @@
 	}
 
 	.loader-demo-copy span {
-		color: var(--sveltely-secondary-color);
+		color: var(--sveltely-text-secondary-color);
 		font-size: calc(var(--sveltely-font-size) * 0.875);
 		line-height: 1.3;
 	}

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

@@ -8,11 +8,9 @@
 		label?: string;
 		active?: boolean;
 	} & StyleProps &
-		Omit<HTMLAnchorAttributes, 'children' | 'class' | 'style'> & {
-			class?: HTMLAnchorAttributes['class'];
-		};
+		Omit<HTMLAnchorAttributes, 'children' | 'class' | 'style'>;
 
-	let { children, label, active = false, class: className = '', ...restProps }: Props = $props();
+	let { children, label, active = false, ...restProps }: Props = $props();
 
 	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
@@ -20,12 +18,7 @@
 	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'navigation-link'));
 </script>
 
-<a
-	class="navigation-link {className}"
-	class:navigation-link-active={active}
-	style={rootStyle}
-	{...props}
->
+<a class="navigation-link" class:navigation-link-active={active} style={rootStyle} {...props}>
 	{#if children}
 		{@render children()}
 	{:else if label}
@@ -42,7 +35,7 @@
 		min-width: 0;
 		align-items: center;
 		border-radius: var(--navigation-link-border-radius, var(--sveltely-border-radius));
-		color: var(--navigation-link-color, var(--sveltely-primary-color));
+		color: var(--navigation-link-color, var(--sveltely-text-primary-color));
 		gap: var(--navigation-link-gap, var(--sveltely-gap));
 		font-size: var(--navigation-link-font-size);
 		line-height: 1.25;
@@ -62,7 +55,10 @@
 
 	.navigation-link:hover,
 	.navigation-link-active {
-		background: var(--navigation-link-active-background, var(--sveltely-hover-color));
+		background: var(
+			--navigation-link-active-background,
+			color-mix(in oklab, var(--sveltely-control-active-color) 5%, transparent)
+		);
 	}
 
 	.navigation-link :global(svg) {

package/dist/components/Library/NavigationStack/Link.svelte.d.ts

@@ -5,9 +5,7 @@ type Props = {
     children?: Snippet;
     label?: string;
     active?: boolean;
-} & StyleProps & Omit<HTMLAnchorAttributes, 'children' | 'class' | 'style'> & {
-    class?: HTMLAnchorAttributes['class'];
-};
+} & StyleProps & Omit<HTMLAnchorAttributes, 'children' | 'class' | 'style'>;
 declare const Link: import("svelte").Component<Props, {}, "">;
 type Link = ReturnType<typeof Link>;
 export default Link;

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

@@ -30,7 +30,13 @@
 	}
 </script>
 
-<button onclick={handleClick} class="sidebar-toggle" style={rootStyle} title="Toggle {side} sidebar" {...props}>
+<button
+	onclick={handleClick}
+	class="sidebar-toggle"
+	style={rootStyle}
+	title="Toggle {side} sidebar"
+	{...props}
+>
 	{#if children}
 		{@render children()}
 	{:else if side === 'left'}
@@ -47,6 +53,6 @@
 	}
 
 	.sidebar-toggle:hover {
-		background: var(--sveltely-hover-color);
+		background: color-mix(in oklab, var(--sveltely-control-active-color) 5%, transparent);
 	}
 </style>

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

@@ -1,12 +1,10 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { tooltip } from '../../../actions/tooltip';
+	import { tooltip as tooltipAction } from '../../../actions/tooltip';
 	import { surfaceStyle, type StyleProps } from '../../../style/surface';
-	import {
-		textEditorStyle,
-		type TextEditorProps,
-		type TextInputMode
-	} from '../../../style/text-editor';
+	import { textStyle, type TextProps } from '../../../style/text';
+	import { type TextInputMode } from '../../../style/text-editor';
+	import type { TooltipProps } from '../../../style/tooltip';
 
 	type Props = {
 		value?: number | null;
@@ -23,7 +21,8 @@
 		max?: number;
 		step?: number | 'any';
 	} & StyleProps &
-		TextEditorProps;
+		TextProps &
+		TooltipProps;
 
 	let {
 		value = $bindable(null),
@@ -39,6 +38,8 @@
 		min,
 		max,
 		step,
+		tooltip,
+		as,
 		textAlign = 'right',
 		fontSize,
 		paddingX,
@@ -62,13 +63,14 @@
 		borderColor,
 		color
 	});
-	const textEditorProps = $derived({ textAlign });
+	const textProps = $derived({ as, textAlign });
 	const rootStyle = $derived.by(() =>
-		[surfaceStyle(styleProps, 'text-field'), textEditorStyle(textEditorProps)]
+		[textStyle(textProps, 'text-field'), surfaceStyle(styleProps, 'text-field')]
 			.filter(Boolean)
 			.join(' ')
 	);
 	const describedBy = $derived(help ? 'text-field-message' : undefined);
+	const resolvedTooltip = $derived(error ? { label: error } : tooltip);
 
 	let draftValue = $state(formatValue(value));
 	let committedValue = $state(value);
@@ -112,7 +114,7 @@
 </script>
 
 <div
-	use:tooltip={{ label: error ?? '', disabled: !error }}
+	use:tooltipAction={resolvedTooltip}
 	class="text-field"
 	style={rootStyle}
 	data-disabled={disabled ? 'true' : 'false'}
@@ -150,8 +152,8 @@
 		min-width: 0;
 		flex-direction: column;
 		gap: var(--text-field-gap, calc(var(--sveltely-gap) * 0.75));
-		color: var(--text-field-color, var(--sveltely-primary-color));
-		font-size: var(--text-field-font-size, calc(var(--sveltely-font-size) * 0.875));
+		color: var(--text-field-color, var(--sveltely-text-primary-color));
+		font-size: var(--text-field-font-size, var(--sveltely-font-size));
 	}
 
 	.text-field-input {
@@ -159,10 +161,12 @@
 		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, var(--sveltely-background-color));
+		background: var(--text-field-background, var(--sveltely-control-background-color));
 		color: inherit;
+		font-size: var(--text-field-font-size);
+		font-weight: var(--text-field-font-weight);
 		font-variant-numeric: tabular-nums;
-		line-height: 1.25rem;
+		line-height: var(--text-field-line-height);
 		outline: none;
 		padding: var(--text-field-padding-y, calc(var(--sveltely-padding-y) * 0.67))
 			var(--text-field-padding-x, var(--sveltely-padding-x));
@@ -175,15 +179,15 @@
 	}
 
 	.text-field-input:focus {
-		border-color: color-mix(in oklab, var(--sveltely-active-color) 50%, white);
+		border-color: color-mix(in oklab, var(--sveltely-control-active-color) 50%, white);
 	}
 
 	.text-field-input::placeholder {
-		color: var(--sveltely-secondary-color);
+		color: var(--sveltely-text-secondary-color);
 	}
 
 	.text-field-message {
-		color: var(--sveltely-secondary-color);
+		color: var(--sveltely-text-secondary-color);
 		font-size: calc(var(--text-field-font-size, 0.875rem) * 0.857);
 		line-height: 1.25;
 	}

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

@@ -1,6 +1,8 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 import { type StyleProps } from '../../../style/surface';
-import { type TextEditorProps, type TextInputMode } from '../../../style/text-editor';
+import { type TextProps } from '../../../style/text';
+import { type TextInputMode } from '../../../style/text-editor';
+import type { TooltipProps } from '../../../style/tooltip';
 type Props = {
     value?: number | null;
     help?: string;
@@ -15,7 +17,7 @@ type Props = {
     min?: number;
     max?: number;
     step?: number | 'any';
-} & StyleProps & TextEditorProps;
+} & StyleProps & TextProps & TooltipProps;
 declare const NumberField: import("svelte").Component<Props, {}, "value">;
 type NumberField = ReturnType<typeof NumberField>;
 export default NumberField;

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

@@ -49,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-[var(--sveltely-secondary-color)] inline-flex items-center justify-center leading-none ${
+		`pagination-button action disabled:bg-zinc-200 disabled:text-[var(--sveltely-text-secondary-color)] inline-flex items-center justify-center leading-none ${
 			variant === 'icon' ? 'pagination-button-icon' : ''
 		}`;
 
@@ -187,7 +187,7 @@
 
 	.pagination-button {
 		border-radius: var(--sveltely-border-radius);
-		background: var(--sveltely-inactive-color);
+		background: var(--sveltely-control-inactive-color);
 		padding: calc(var(--sveltely-padding-y) * 0.67 * var(--pagination-scale))
 			calc(var(--sveltely-padding-x) * 0.67 * var(--pagination-scale));
 	}
@@ -211,7 +211,7 @@
 	.pagination-input {
 		width: 10ch;
 		border-radius: var(--sveltely-border-radius);
-		background: var(--sveltely-inactive-color);
+		background: var(--sveltely-control-inactive-color);
 		font-size: inherit;
 		line-height: 1.25;
 		outline: none;

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

@@ -78,18 +78,13 @@
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
 		background: var(--sveltely-background-color);
-		color: var(--sveltely-primary-color);
+		color: var(--sveltely-text-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;
-	}
-
-	:global(.popover-trigger[data-styled='true']:hover) {
-		background: var(--sveltely-hover-color);
+			border-color 150ms;
 	}
 </style>

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

@@ -0,0 +1,50 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Scroll View',
+		description: 'Debug fixture for top and bottom scroll gradients.',
+		columnSpan: 2,
+		rowSpan: 2
+	};
+</script>
+
+<script lang="ts">
+	import ScrollView, { type ScrollGeometry } from './index';
+	import VStack from '../VStack';
+
+	const rows = Array.from({ length: 24 }, (_, index) => `Debug row ${index + 1}`);
+	let geometry = $state<ScrollGeometry | null>(null);
+</script>
+
+<VStack height="100%" width="100%" gap={6}>
+	<div class="scroll-view-demo-meta">
+		<span>offset {Math.round(geometry?.offset.y ?? 0)}</span>
+		<span>viewport {Math.round(geometry?.viewport.height ?? 0)}</span>
+		<span>content {Math.round(geometry?.content.height ?? 0)}</span>
+		<span>bottom {Math.round(geometry?.remaining.bottom ?? 0)}</span>
+	</div>
+
+	<ScrollView height="100%" width="100%" onScroll={(nextGeometry) => (geometry = nextGeometry)}>
+		<VStack gap={4}>
+			{#each rows as row}
+				<div class="scroll-view-demo-row">{row}</div>
+			{/each}
+		</VStack>
+	</ScrollView>
+</VStack>
+
+<style>
+	.scroll-view-demo-meta {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.375rem;
+		color: var(--sveltely-text-secondary-color);
+		font-size: 0.75rem;
+	}
+
+	.scroll-view-demo-row {
+		border-radius: var(--sveltely-border-radius-nested);
+		background: var(--sveltely-background-color);
+		padding: 0.625rem 0.75rem;
+		color: var(--sveltely-text-primary-color);
+	}
+</style>

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

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