@x33025/sveltely 0.1.2 → 0.1.4

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

@@ -1,11 +1,39 @@
 import type { Snippet } from 'svelte';
 import { type StyleProps } from '../../../style/surface';
 import type { ScrollAxis } from '../../../style/scroll';
+export type ScrollGeometry = {
+    axis: ScrollAxis;
+    offset: {
+        x: number;
+        y: number;
+    };
+    viewport: {
+        width: number;
+        height: number;
+    };
+    content: {
+        width: number;
+        height: number;
+    };
+    remaining: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    progress: {
+        x: number;
+        y: number;
+    };
+};
 type Props = {
     children: Snippet;
     viewport?: HTMLElement | null;
     axis?: ScrollAxis;
     contentStyles?: StyleProps;
+    onScroll?: (geometry: ScrollGeometry) => void;
+    scrollGradient?: boolean;
+    scrollGradientSize?: number | string;
 } & StyleProps;
 declare const ScrollView: import("svelte").Component<Props, {}, "viewport">;
 type ScrollView = ReturnType<typeof ScrollView>;

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

@@ -1 +1,2 @@
 export { default } from './ScrollView.svelte';
+export type { ScrollGeometry } from './ScrollView.svelte';

package/dist/components/Library/{SearchInput/SearchInput.demo.svelte → SearchField/SearchField.demo.svelte}

@@ -1,17 +1,17 @@
 <script module lang="ts">
 	export const demo = {
-		name: 'SearchInput',
+		name: 'SearchField',
 		description: 'Search field with icon, input, and optional confirmation hint.'
 	};
 </script>
 
 <script lang="ts">
-	import SearchInput from './SearchInput.svelte';
+	import SearchField from './SearchField.svelte';
 
 	let value = $state('');
 </script>
 
 <div class="vstack w-full max-w-sm gap-2">
-	<SearchInput bind:value placeholder="Search components..." />
-	<p class="text-xs text-zinc-500">Value: {value || 'empty'}</p>
+	<SearchField bind:value placeholder="Search components..." />
+	<p class="text-xs text-[var(--sveltely-secondary-color)]">Value: {value || 'empty'}</p>
 </div>

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

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

package/dist/components/Library/{SearchInput/SearchInput.svelte → SearchField/SearchField.svelte}

@@ -6,7 +6,8 @@
 	type Props = {
 		value?: string;
 		radiusSource?: boolean;
-	} & StyleProps & Omit<HTMLInputAttributes, 'children' | 'type' | 'value' | 'class' | 'style'>;
+	} & StyleProps &
+		Omit<HTMLInputAttributes, 'children' | 'type' | 'value' | 'class' | 'style'>;
 
 	let {
 		value = $bindable(''),
@@ -19,70 +20,65 @@
 	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
 	const props = $derived(extractedStyleProps.restProps);
-	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'search-input'));
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'search-field'));
 </script>
 
 <label
-	class="search-input"
+	class="search-field"
 	style={rootStyle}
 	data-disabled={disabled ? 'true' : 'false'}
 	data-popover-radius-source={radiusSource ? 'true' : undefined}
 >
-	<span class="search-input-icon" aria-hidden="true">
+	<span class="search-field-icon" aria-hidden="true">
 		<SearchIcon class="size-4" />
 	</span>
-	<input
-		type="search"
-		bind:value
-		{disabled}
-		{placeholder}
-		class="search-input-field"
-		{...props}
-	/>
+	<input type="search" bind:value {disabled} {placeholder} class="search-field-input" {...props} />
 </label>
 
 <style>
-	.search-input {
+	.search-field {
 		display: inline-flex;
 		width: 100%;
 		align-items: center;
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
-		background: white;
-		color: var(--color-zinc-900);
-		gap: var(--search-input-gap, calc(var(--sveltely-padding-x) * 0.67));
-		padding:
-			var(--search-input-padding-y, calc(var(--sveltely-padding-y) * 0.67))
-			var(--search-input-padding-x, var(--sveltely-padding-x))
-			var(--search-input-padding-y, calc(var(--sveltely-padding-y) * 0.67))
-			var(--search-input-padding-leading, calc(var(--sveltely-padding-y) * 0.67));
-		font-size: var(--search-input-font-size, 0.875rem);
+		background: var(--sveltely-background-color);
+		color: var(--sveltely-primary-color);
+		gap: var(--search-field-gap, calc(var(--sveltely-padding-x) * 0.67));
+		padding: var(--search-field-padding-y, calc(var(--sveltely-padding-y) * 0.67))
+			var(--search-field-padding-x, var(--sveltely-padding-x))
+			var(--search-field-padding-y, calc(var(--sveltely-padding-y) * 0.67))
+			var(--search-field-padding-leading, calc(var(--sveltely-padding-y) * 0.67));
+		font-size: var(--search-field-font-size, 0.875rem);
 		line-height: 1.25rem;
-		transition: color 150ms, border-color 150ms, background-color 150ms;
+		transition:
+			color 150ms,
+			border-color 150ms,
+			background-color 150ms;
 	}
 
-	.search-input:focus-within {
-		border-color: color-mix(in oklab, var(--sveltely-primary-color) 50%, white);
+	.search-field:focus-within {
+		border-color: color-mix(in oklab, var(--sveltely-active-color) 50%, white);
 	}
 
-	.search-input[data-disabled='true'] {
+	.search-field[data-disabled='true'] {
 		cursor: not-allowed;
 		opacity: 0.6;
 	}
 
-	.search-input-icon {
+	.search-field-icon {
 		flex-shrink: 0;
-		color: var(--color-zinc-500);
+		color: var(--sveltely-secondary-color);
 	}
 
-	.search-input-field {
+	.search-field-input {
 		min-width: 0;
 		flex: 1 1 auto;
 		background: transparent;
 		outline: none;
 	}
 
-	.search-input-field::-webkit-search-cancel-button {
+	.search-field-input::-webkit-search-cancel-button {
 		appearance: none;
 	}
 </style>

package/dist/components/Library/{SearchInput/SearchInput.svelte.d.ts → SearchField/SearchField.svelte.d.ts}

@@ -4,6 +4,6 @@ type Props = {
     value?: string;
     radiusSource?: boolean;
 } & StyleProps & Omit<HTMLInputAttributes, 'children' | 'type' | 'value' | 'class' | 'style'>;
-declare const SearchInput: import("svelte").Component<Props, {}, "value">;
-type SearchInput = ReturnType<typeof SearchInput>;
-export default SearchInput;
+declare const SearchField: import("svelte").Component<Props, {}, "value">;
+type SearchField = ReturnType<typeof SearchField>;
+export default SearchField;

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

@@ -0,0 +1 @@
+export { default } from './SearchField.svelte';

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

@@ -0,0 +1 @@
+export { default } from './SearchField.svelte';

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

@@ -19,5 +19,5 @@
 
 <div class="vstack center gap-2">
 	<SegmentedPicker {options} bind:value />
-	<p class="text-xs text-zinc-500">Selected: {value}</p>
+	<p class="text-xs text-[var(--sveltely-secondary-color)]">Selected: {value}</p>
 </div>

package/dist/components/Library/SegmentedPicker/SegmentedPicker.svelte

@@ -16,7 +16,8 @@
 		options: Option[];
 		value: string;
 		disabled?: boolean;
-	} & StyleProps & Record<string, unknown> = $props();
+	} & StyleProps &
+		Record<string, unknown> = $props();
 
 	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
@@ -65,7 +66,7 @@
 		--segmented-picker-scale: calc(var(--segmented-picker-font-size) / 0.875rem);
 		--sveltely-nested-inset: var(--segmented-picker-inset);
 		border-radius: var(--sveltely-border-radius);
-		background: var(--color-zinc-100);
+		background: var(--sveltely-inactive-color);
 		gap: var(--segmented-picker-inset);
 		font-size: var(--segmented-picker-font-size);
 		padding: var(--segmented-picker-inset);
@@ -79,8 +80,7 @@
 	.segmented-picker-button {
 		border-radius: var(--sveltely-border-radius-nested);
 		transition: background-color 150ms;
-		padding:
-			calc(var(--sveltely-padding-y) * 0.33 * var(--segmented-picker-scale))
+		padding: calc(var(--sveltely-padding-y) * 0.33 * var(--segmented-picker-scale))
 			calc(var(--sveltely-padding-x) * 0.83 * var(--segmented-picker-scale));
 	}
 
@@ -89,18 +89,18 @@
 	}
 
 	.segmented-picker-button-active {
-		background: var(--sveltely-primary-color);
-		color: white;
+		background: var(--sveltely-active-color);
+		color: var(--sveltely-background-color);
 	}
 
 	.segmented-picker-button-disabled {
 		cursor: not-allowed;
-		color: var(--color-zinc-400);
+		color: var(--sveltely-secondary-color);
 		pointer-events: none;
 	}
 
 	.segmented-picker-button-disabled-selected {
-		background: color-mix(in oklab, var(--sveltely-primary-color) 35%, white);
-		color: var(--color-zinc-400);
+		background: color-mix(in oklab, var(--sveltely-active-color) 35%, white);
+		color: var(--sveltely-secondary-color);
 	}
 </style>

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

@@ -15,7 +15,7 @@
 	{/snippet}
 
 	<div class="vstack gap-3">
-		<p class="text-sm text-zinc-700">This is a simple sheet example.</p>
+		<p class="text-sm text-[var(--sveltely-primary-color)]">This is a simple sheet example.</p>
 		<div class="rounded border border-gray-200/70 p-3 text-sm text-gray-700">
 			<div>Panel one content.</div>
 			<div class="mt-2">Panel two content.</div>

package/dist/components/Library/Sheet/Sheet.svelte

@@ -2,7 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import { portalContent } from '../../../actions/portal';
 	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
-interface Props {
+	interface Props {
 		trigger?: Snippet;
 		open?: boolean;
 		label?: string;
@@ -87,13 +87,16 @@ interface Props {
 		align-items: center;
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
-		background: white;
-		color: var(--color-zinc-800);
+		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;
-		transition: color 150ms, border-color 150ms, background-color 150ms;
+		transition:
+			color 150ms,
+			border-color 150ms,
+			background-color 150ms;
 	}
 
 	.sheet-trigger:hover {
@@ -102,7 +105,7 @@ interface Props {
 
 	.sheet {
 		border-radius: var(--sveltely-border-radius);
-		background: white;
+		background: var(--sveltely-background-color);
 		padding: calc(var(--sveltely-padding-y) * 1.33) calc(var(--sveltely-padding-x) * 1.33);
 	}
 

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

@@ -13,5 +13,5 @@
 
 <div class="vstack w-full max-w-sm gap-2">
 	<Slider bind:value min={0} max={100} />
-	<p class="text-xs text-zinc-500">Value: {value}</p>
+	<p class="text-xs text-[var(--sveltely-secondary-color)]">Value: {value}</p>
 </div>

package/dist/components/Library/Slider/Slider.svelte

@@ -14,7 +14,8 @@
 		max?: number;
 		step?: number | string;
 		disabled?: boolean;
-	} & StyleProps & Record<string, unknown> = $props();
+	} & StyleProps &
+		Record<string, unknown> = $props();
 
 	const extractedStyleProps = $derived.by(() => extractStyleProps(props));
 	const styleProps = $derived(extractedStyleProps.styleProps);
@@ -65,7 +66,7 @@
 	}
 
 	.slider:focus-visible {
-		outline: 2px solid color-mix(in oklab, var(--sveltely-primary-color) 35%, white);
+		outline: 2px solid color-mix(in oklab, var(--sveltely-active-color) 35%, white);
 		outline-offset: 4px;
 	}
 
@@ -79,10 +80,10 @@
 		border-radius: var(--sveltely-border-radius);
 		background: linear-gradient(
 			to right,
-			var(--sveltely-primary-color) 0%,
-			var(--sveltely-primary-color) var(--slider-pct),
-			var(--color-zinc-300) var(--slider-pct),
-			var(--color-zinc-300) 100%
+			var(--sveltely-active-color) 0%,
+			var(--sveltely-active-color) var(--slider-pct),
+			var(--sveltely-border-color) var(--slider-pct),
+			var(--sveltely-border-color) 100%
 		);
 	}
 
@@ -93,7 +94,7 @@
 		height: var(--slider-thumb-size);
 		border-radius: var(--sveltely-border-radius);
 		border: var(--slider-thumb-ring-width) solid var(--color-white);
-		background: var(--sveltely-primary-color);
+		background: var(--sveltely-active-color);
 		margin-top: calc((var(--slider-track-height) - var(--slider-thumb-size)) / 2);
 	}
 
@@ -101,14 +102,14 @@
 		height: var(--slider-track-height);
 		border: none;
 		border-radius: var(--sveltely-border-radius);
-		background: var(--color-zinc-300);
+		background: var(--sveltely-border-color);
 	}
 
 	.slider::-moz-range-progress {
 		height: var(--slider-track-height);
 		border: none;
 		border-radius: var(--sveltely-border-radius);
-		background: var(--sveltely-primary-color);
+		background: var(--sveltely-active-color);
 	}
 
 	.slider::-moz-range-thumb {
@@ -117,6 +118,6 @@
 		height: var(--slider-thumb-size);
 		border-radius: var(--sveltely-border-radius);
 		border: var(--slider-thumb-ring-width) solid var(--color-white);
-		background: var(--sveltely-primary-color);
+		background: var(--sveltely-active-color);
 	}
 </style>

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

@@ -9,6 +9,6 @@
 	import Spinner from './Spinner.svelte';
 </script>
 
-<div class="text-zinc-700">
+<div class="text-[var(--sveltely-primary-color)]">
 	<Spinner />
 </div>

package/dist/components/Library/Switch/Switch.svelte

@@ -74,7 +74,7 @@
 		gap: var(--switch-gap, var(--sveltely-gap));
 		font-size: var(--switch-font-size);
 		line-height: 1.25;
-		color: var(--switch-color, var(--color-zinc-800));
+		color: var(--switch-color, var(--sveltely-primary-color));
 		cursor: pointer;
 		user-select: none;
 	}
@@ -106,7 +106,8 @@
 		display: block;
 		width: 100%;
 		height: 100%;
-		border: var(--switch-border-width) solid var(--switch-border-color, var(--sveltely-border-color));
+		border: var(--switch-border-width) solid
+			var(--switch-border-color, var(--sveltely-border-color));
 		border-radius: var(--switch-resolved-border-radius);
 		background: var(--switch-background, var(--sveltely-inactive-color));
 		box-sizing: border-box;
@@ -142,14 +143,8 @@
 	}
 
 	.switch:hover .switch-control input:checked + .switch-track {
-		border-color: var(
-			--switch-checked-hover-border-color,
-			var(--sveltely-active-hover-color)
-		);
-		background: var(
-			--switch-checked-hover-background,
-			var(--sveltely-active-hover-color)
-		);
+		border-color: var(--switch-checked-hover-border-color, var(--sveltely-active-hover-color));
+		background: var(--switch-checked-hover-background, var(--sveltely-active-hover-color));
 	}
 
 	.switch-control input:checked + .switch-track .switch-thumb {
@@ -158,7 +153,7 @@
 	}
 
 	.switch-control input:focus-visible + .switch-track {
-		outline: 2px solid color-mix(in oklab, var(--sveltely-primary-color) 24%, white);
+		outline: 2px solid color-mix(in oklab, var(--sveltely-active-color) 24%, white);
 		outline-offset: 2px;
 	}
 

package/dist/components/Library/TextField/TextField.svelte

@@ -61,7 +61,9 @@
 	});
 	const textEditorProps = $derived({ textAlign });
 	const rootStyle = $derived.by(() =>
-		[surfaceStyle(styleProps, 'text-field'), textEditorStyle(textEditorProps)].filter(Boolean).join(' ')
+		[surfaceStyle(styleProps, 'text-field'), textEditorStyle(textEditorProps)]
+			.filter(Boolean)
+			.join(' ')
 	);
 	const describedBy = $derived(help ? 'text-field-message' : undefined);
 </script>
@@ -100,7 +102,7 @@
 		min-width: 0;
 		flex-direction: column;
 		gap: var(--text-field-gap, calc(var(--sveltely-gap) * 0.75));
-		color: var(--text-field-color, var(--color-zinc-900));
+		color: var(--text-field-color, var(--sveltely-primary-color));
 		font-size: var(--text-field-font-size, calc(var(--sveltely-font-size) * 0.875));
 	}
 
@@ -109,27 +111,30 @@
 		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, white);
+		background: var(--text-field-background, var(--sveltely-background-color));
 		color: inherit;
 		line-height: 1.25rem;
 		outline: none;
-		padding:
-			var(--text-field-padding-y, calc(var(--sveltely-padding-y) * 0.67))
+		padding: var(--text-field-padding-y, calc(var(--sveltely-padding-y) * 0.67))
 			var(--text-field-padding-x, var(--sveltely-padding-x));
 		text-align: var(--text-field-text-align, start);
-		transition: color 150ms, border-color 150ms, background-color 150ms, box-shadow 150ms;
+		transition:
+			color 150ms,
+			border-color 150ms,
+			background-color 150ms,
+			box-shadow 150ms;
 	}
 
 	.text-field-input:focus {
-		border-color: color-mix(in oklab, var(--sveltely-primary-color) 50%, white);
+		border-color: color-mix(in oklab, var(--sveltely-active-color) 50%, white);
 	}
 
 	.text-field-input::placeholder {
-		color: var(--color-zinc-400);
+		color: var(--sveltely-secondary-color);
 	}
 
 	.text-field-message {
-		color: var(--color-zinc-500);
+		color: var(--sveltely-secondary-color);
 		font-size: calc(var(--text-field-font-size, 0.875rem) * 0.857);
 		line-height: 1.25;
 	}

package/dist/components/Library/{TokenSearchInput/TokenSearchInput.demo.svelte → TokenSearchField/TokenSearchField.demo.svelte}

@@ -1,19 +1,19 @@
 <script module lang="ts">
 	export const demo = {
-		name: 'TokenSearchInput',
+		name: 'TokenSearchField',
 		description: 'Search field that turns comma-separated entries into removable tokens.',
 		columnSpan: 2
 	};
 </script>
 
 <script lang="ts">
-	import TokenSearchInput from './TokenSearchInput.svelte';
+	import TokenSearchField from './TokenSearchField.svelte';
 
 	let tokens = $state(['svelte', 'ui']);
 	let value = $state('');
 </script>
 
 <div class="vstack w-full max-w-md gap-2">
-	<TokenSearchInput bind:tokens bind:value placeholder="Search keywords" />
-	<p class="text-xs text-zinc-500">Tokens: {tokens.join(', ') || 'empty'}</p>
+	<TokenSearchField bind:tokens bind:value placeholder="Search keywords" />
+	<p class="text-xs text-[var(--sveltely-secondary-color)]">Tokens: {tokens.join(', ') || 'empty'}</p>
 </div>

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

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