@x33025/sveltely 0.1.18 → 0.1.19

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;