@x33025/sveltely 0.1.2 → 0.1.4

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

@@ -11,7 +11,8 @@
 		tokenPlaceholder?: string;
 		normalizeToken?: (value: string) => string;
 		showIcon?: boolean;
-	} & StyleProps & Omit<HTMLInputAttributes, 'children' | 'type' | 'value' | 'placeholder' | 'class' | 'style'>;
+	} & StyleProps &
+		Omit<HTMLInputAttributes, 'children' | 'type' | 'value' | 'placeholder' | 'class' | 'style'>;
 
 	const defaultNormalizeToken = (value: string) => value.trim().replace(/\s+/g, ' ');
 
@@ -30,7 +31,7 @@
 	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
 	const props = $derived(extractedStyleProps.restProps);
-	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'token-search-input'));
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'token-search-field'));
 
 	const addToken = (rawValue: string) => {
 		const token = normalizeToken(rawValue);
@@ -68,12 +69,10 @@
 		event.preventDefault();
 
 		const nextTokens = [...tokens];
-		const seen = new Set(nextTokens);
 		for (const part of pasted.split(',')) {
 			const token = normalizeToken(part);
-			if (!token || seen.has(token)) continue;
+			if (!token || nextTokens.includes(token)) continue;
 			nextTokens.push(token);
-			seen.add(token);
 		}
 
 		tokens = nextTokens;
@@ -81,28 +80,28 @@
 	};
 </script>
 
-	<div
-		class="token-search-input hstack w-full flex-nowrap items-center overflow-x-auto overflow-y-hidden whitespace-nowrap"
-		class:token-search-input-has-tokens={tokens.length > 0}
-		style={rootStyle}
-		data-disabled={disabled ? 'true' : 'false'}
-	>
+<div
+	class="token-search-field hstack w-full flex-nowrap items-center overflow-x-auto overflow-y-hidden whitespace-nowrap"
+	class:token-search-field-has-tokens={tokens.length > 0}
+	style={rootStyle}
+	data-disabled={disabled ? 'true' : 'false'}
+>
 	{#if showIcon}
-		<span class="token-search-input-icon" aria-hidden="true">
-			<SearchIcon class="token-search-input-search-icon" />
+		<span class="token-search-field-icon" aria-hidden="true">
+			<SearchIcon class="token-search-field-search-icon" />
 		</span>
 	{/if}
 
 	{#each tokens as token, index (`${token}-${index}`)}
 		<button
 			type="button"
-			class="token-search-input-token"
+			class="token-search-field-token"
 			onclick={() => removeToken(index)}
 			aria-label={`Remove search token ${token}`}
 			{disabled}
 		>
 			<span>{token}</span>
-			<X class="token-search-input-remove-icon" aria-hidden="true" />
+			<X class="token-search-field-remove-icon" aria-hidden="true" />
 		</button>
 	{/each}
 
@@ -111,7 +110,7 @@
 		bind:value
 		{disabled}
 		placeholder={tokens.length === 0 ? placeholder : tokenPlaceholder}
-		class="token-search-input-field"
+		class="token-search-field-input"
 		onkeydown={onKeydown}
 		onpaste={onPaste}
 		onblur={commitValue}
@@ -119,60 +118,63 @@
 	/>
 
 	{#if confirmText}
-		<span class="token-search-input-confirm">
+		<span class="token-search-field-confirm">
 			{confirmText}
 		</span>
 	{/if}
 </div>
 
 <style>
-	.token-search-input {
-		--token-search-input-inset: var(--sveltely-inset);
-		--token-search-input-font-size: calc(var(--sveltely-font-size) * 0.875);
-		--token-search-input-scale: calc(var(--token-search-input-font-size) / 0.875rem);
-		--token-search-input-line-height: calc(var(--token-search-input-font-size) * 1.429);
-		--token-search-input-search-icon-size: calc(var(--token-search-input-font-size) * 1.143);
-		--token-search-input-remove-icon-size: calc(var(--token-search-input-font-size) * 0.857);
-		--token-search-input-confirm-font-size: calc(var(--token-search-input-font-size) * 0.857);
-		--sveltely-nested-inset: var(--token-search-input-inset);
+	.token-search-field {
+		--token-search-field-inset: var(--sveltely-inset);
+		--token-search-field-font-size: calc(var(--sveltely-font-size) * 0.875);
+		--token-search-field-scale: calc(var(--token-search-field-font-size) / 0.875rem);
+		--token-search-field-line-height: calc(var(--token-search-field-font-size) * 1.429);
+		--token-search-field-search-icon-size: calc(var(--token-search-field-font-size) * 1.143);
+		--token-search-field-remove-icon-size: calc(var(--token-search-field-font-size) * 0.857);
+		--token-search-field-confirm-font-size: calc(var(--token-search-field-font-size) * 0.857);
+		--sveltely-nested-inset: var(--token-search-field-inset);
 		min-width: 0;
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
-		color: var(--color-zinc-900);
-		gap: var(--token-search-input-inset);
-		padding:
-			calc(var(--sveltely-padding-y) * 0.58 * var(--token-search-input-scale))
-			calc(var(--sveltely-padding-x) * var(--token-search-input-scale));
-		font-size: var(--token-search-input-font-size);
-		line-height: var(--token-search-input-line-height);
+		color: var(--sveltely-primary-color);
+		gap: var(--token-search-field-inset);
+		padding: calc(var(--sveltely-padding-y) * 0.58 * var(--token-search-field-scale))
+			calc(var(--sveltely-padding-x) * var(--token-search-field-scale));
+		font-size: var(--token-search-field-font-size);
+		line-height: var(--token-search-field-line-height);
 		outline: none;
-		transition: color 150ms, border-color 150ms, background-color 150ms, box-shadow 150ms;
+		transition:
+			color 150ms,
+			border-color 150ms,
+			background-color 150ms,
+			box-shadow 150ms;
 	}
 
-	.token-search-input:focus-within {
-		border-color: color-mix(in oklab, var(--sveltely-primary-color) 50%, white);
+	.token-search-field:focus-within {
+		border-color: color-mix(in oklab, var(--sveltely-active-color) 50%, white);
 	}
 
-	.token-search-input-has-tokens {
-		padding: var(--token-search-input-inset);
+	.token-search-field-has-tokens {
+		padding: var(--token-search-field-inset);
 	}
 
-	.token-search-input[data-disabled='true'] {
+	.token-search-field[data-disabled='true'] {
 		cursor: not-allowed;
 		opacity: 0.6;
 	}
 
-	.token-search-input-icon {
+	.token-search-field-icon {
 		flex-shrink: 0;
-		color: var(--color-zinc-500);
+		color: var(--sveltely-secondary-color);
 	}
 
-	:global(.token-search-input-search-icon) {
-		width: var(--token-search-input-search-icon-size);
-		height: var(--token-search-input-search-icon-size);
+	:global(.token-search-field-search-icon) {
+		width: var(--token-search-field-search-icon-size);
+		height: var(--token-search-field-search-icon-size);
 	}
 
-	.token-search-input-field {
+	.token-search-field-input {
 		field-sizing: content;
 		min-width: 0;
 		flex: 1 1 auto;
@@ -180,50 +182,52 @@
 		outline: none;
 	}
 
-	.token-search-input-field::-webkit-search-cancel-button {
+	.token-search-field-input::-webkit-search-cancel-button {
 		appearance: none;
 	}
 
-	.token-search-input-token {
+	.token-search-field-token {
 		display: inline-flex;
 		flex-shrink: 0;
 		align-items: center;
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius-nested);
-		background: var(--color-zinc-100);
-		color: var(--color-zinc-700);
+		background: var(--sveltely-inactive-color);
+		color: var(--sveltely-primary-color);
 		font-size: inherit;
 		line-height: inherit;
-		gap: calc(var(--sveltely-padding-x) * 0.66 * var(--token-search-input-scale));
-		padding:
-			calc(var(--sveltely-padding-y) * 0.17 * var(--token-search-input-scale))
-			calc(var(--sveltely-padding-y) * 0.33 * var(--token-search-input-scale))
-			calc(var(--sveltely-padding-y) * 0.17 * var(--token-search-input-scale))
-			calc(var(--sveltely-padding-x) * 0.66 * var(--token-search-input-scale));
-		transition: color 150ms, border-color 150ms, background-color 150ms;
+		gap: calc(var(--sveltely-padding-x) * 0.66 * var(--token-search-field-scale));
+		padding: calc(var(--sveltely-padding-y) * 0.17 * var(--token-search-field-scale))
+			calc(var(--sveltely-padding-y) * 0.33 * var(--token-search-field-scale))
+			calc(var(--sveltely-padding-y) * 0.17 * var(--token-search-field-scale))
+			calc(var(--sveltely-padding-x) * 0.66 * var(--token-search-field-scale));
+		transition:
+			color 150ms,
+			border-color 150ms,
+			background-color 150ms;
 	}
 
-	:global(.token-search-input-remove-icon) {
-		width: var(--token-search-input-remove-icon-size);
-		height: var(--token-search-input-remove-icon-size);
+	:global(.token-search-field-remove-icon) {
+		width: var(--token-search-field-remove-icon-size);
+		height: var(--token-search-field-remove-icon-size);
 	}
 
-	.token-search-input-token:hover:not(:disabled) {
-		border-color: var(--color-zinc-300);
+	.token-search-field-token:hover:not(:disabled) {
+		border-color: var(--sveltely-border-color);
 		background: var(--sveltely-hover-color);
 	}
 
-	.token-search-input-token:disabled {
+	.token-search-field-token:disabled {
 		cursor: not-allowed;
 		opacity: 0.6;
 	}
 
-	.token-search-input-confirm {
+	.token-search-field-confirm {
 		flex-shrink: 0;
-		color: var(--color-zinc-500);
-		font-size: var(--token-search-input-confirm-font-size);
+		color: var(--sveltely-secondary-color);
+		font-size: var(--token-search-field-confirm-font-size);
 		font-weight: 500;
-		line-height: calc(var(--token-search-input-confirm-font-size) * 1.333);
+		line-height: calc(var(--token-search-field-confirm-font-size) * 1.333);
 		letter-spacing: 0.18em;
 		text-transform: uppercase;
 	}

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

@@ -9,6 +9,6 @@ type Props = {
     normalizeToken?: (value: string) => string;
     showIcon?: boolean;
 } & StyleProps & Omit<HTMLInputAttributes, 'children' | 'type' | 'value' | 'placeholder' | 'class' | 'style'>;
-declare const TokenSearchInput: import("svelte").Component<Props, {}, "value" | "tokens">;
-type TokenSearchInput = ReturnType<typeof TokenSearchInput>;
-export default TokenSearchInput;
+declare const TokenSearchField: import("svelte").Component<Props, {}, "value" | "tokens">;
+type TokenSearchField = ReturnType<typeof TokenSearchField>;
+export default TokenSearchField;

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

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

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

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

package/dist/components/Library/WheelPicker/WheelColumn.svelte

@@ -20,11 +20,7 @@
 
 	const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
 
-	const animateScrollTo = (
-		nextViewport: HTMLDivElement,
-		targetTop: number,
-		duration = 220
-	) => {
+	const animateScrollTo = (nextViewport: HTMLDivElement, targetTop: number, duration = 220) => {
 		if (scrollAnimationFrame) cancelAnimationFrame(scrollAnimationFrame);
 
 		const startTop = nextViewport.scrollTop;
@@ -264,12 +260,10 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding:
-			0
-			calc(var(--sveltely-padding-x) * 0.67 * var(--wheel-picker-scale));
+		padding: 0 calc(var(--sveltely-padding-x) * 0.67 * var(--wheel-picker-scale));
 		font-size: calc(var(--wheel-picker-font-size) * 0.875);
 		line-height: 1;
-		color: var(--color-zinc-700);
+		color: var(--sveltely-primary-color);
 		text-align: center;
 		appearance: none;
 		position: relative;
@@ -289,7 +283,7 @@
 	}
 
 	.wheel-column-option:focus-visible {
-		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/WheelPicker/WheelPicker.svelte

@@ -6,7 +6,8 @@
 	type Props = {
 		columns: WheelColumnData[];
 		height?: number | string;
-	} & StyleProps & Record<string, unknown>;
+	} & StyleProps &
+		Record<string, unknown>;
 
 	const toCssLength = (value: number | string | undefined) =>
 		value === undefined ? undefined : typeof value === 'number' ? `${value}px` : value;
@@ -23,7 +24,6 @@
 		const heightStyle = `--wheel-picker-height: ${resolvedHeight};`;
 		return rootStyle ? `${rootStyle} ${heightStyle}` : heightStyle;
 	});
-
 </script>
 
 <div class="wheel-picker vstack" style={pickerStyle} {...props}>
@@ -47,11 +47,7 @@
 				class="wheel-picker-column"
 				style={`--wheel-picker-column-flex: ${column.options.length <= 3 ? 0.85 : 1};`}
 			>
-				<WheelColumn
-					options={column.options}
-					value={column.value}
-					onChange={column.onChange}
-				/>
+				<WheelColumn options={column.options} value={column.value} onChange={column.onChange} />
 			</div>
 		{/each}
 	</div>
@@ -99,7 +95,7 @@
 		height: var(--wheel-picker-option-height);
 		transform: translateY(-50%);
 		border-radius: var(--sveltely-border-radius);
-		background: color-mix(in oklab, var(--color-zinc-100) 85%, white);
+		background: color-mix(in oklab, var(--sveltely-inactive-color) 85%, white);
 		pointer-events: none;
 		z-index: 0;
 	}
@@ -109,6 +105,6 @@
 		font-size: calc(var(--wheel-picker-font-size) * 0.75);
 		line-height: 1;
 		font-weight: 500;
-		color: var(--color-zinc-500);
+		color: var(--sveltely-secondary-color);
 	}
 </style>

package/dist/components/Local/HeroCard.svelte

@@ -20,14 +20,16 @@
 	gap={0.5}
 	border="1px solid var(--sveltely-border-color)"
 	borderRadius={0.75}
-	background="white"
+	background="var(--sveltely-background-color)"
 	paddingX={1.5}
 	paddingY={1.5}
 >
 	{#if title}
-		<h1 class="text-3xl font-semibold tracking-tight text-zinc-950">{title}</h1>
+		<h1 class="text-3xl font-semibold tracking-tight text-[var(--sveltely-primary-color)]">
+			{title}
+		</h1>
 		{#if description}
-			<p class="max-w-3xl text-sm text-zinc-600">{description}</p>
+			<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}>

package/dist/components/Local/StyleControls.svelte

@@ -10,8 +10,10 @@
 		inset?: number;
 		borderColor?: string;
 		primaryColor?: string;
+		secondaryColor?: string;
 		activeColor?: string;
 		inactiveColor?: string;
+		backgroundColor?: string;
 	};
 
 	let {
@@ -23,81 +25,110 @@
 		inset = $bindable(0.25),
 		borderColor = $bindable('#e4e4e7'),
 		primaryColor = $bindable('#18181b'),
+		secondaryColor = $bindable('#71717a'),
 		activeColor = $bindable('#18181b'),
-		inactiveColor = $bindable('#f4f4f5')
+		inactiveColor = $bindable('#18181b'),
+		backgroundColor = $bindable('#ffffff')
 	}: Props = $props();
 </script>
 
-<div class="vstack gap-3 text-sm text-zinc-700" style="--sveltely-border-radius: 0.75rem;">
-	<div class="font-semibold tracking-wide text-zinc-500 uppercase">Controls</div>
+<div
+	class="vstack gap-3 text-sm text-[var(--sveltely-primary-color)]"
+	style="--sveltely-border-radius: 0.75rem;"
+>
+	<div class="font-semibold tracking-wide text-[var(--sveltely-secondary-color)] uppercase">
+		Controls
+	</div>
 	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3 text-zinc-700">
+		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Font size</span>
-			<span class="text-zinc-500">{fontSize.toFixed(2)}rem</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{fontSize.toFixed(2)}rem</span>
 		</div>
 		<Slider bind:value={fontSize} min={0.5} max={2} step={0.05} />
 	</div>
 	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3 text-zinc-700">
+		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Border radius</span>
-			<span class="text-zinc-500">{borderRadius.toFixed(2)}rem</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{borderRadius.toFixed(2)}rem</span>
 		</div>
 		<Slider bind:value={borderRadius} min={0} max={3} step={0.05} />
 	</div>
 	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3 text-zinc-700">
+		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Padding X</span>
-			<span class="text-zinc-500">{paddingX.toFixed(2)}rem</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{paddingX.toFixed(2)}rem</span>
 		</div>
 		<Slider bind:value={paddingX} min={0} max={2} step="any" />
 	</div>
 	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3 text-zinc-700">
+		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Padding Y</span>
-			<span class="text-zinc-500">{paddingY.toFixed(2)}rem</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{paddingY.toFixed(2)}rem</span>
 		</div>
 		<Slider bind:value={paddingY} min={0} max={2} step="any" />
 	</div>
 	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3 text-zinc-700">
+		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Gap</span>
-			<span class="text-zinc-500">{gap.toFixed(2)}rem</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{gap.toFixed(2)}rem</span>
 		</div>
 		<Slider bind:value={gap} min={0} max={2} step="any" />
 	</div>
 	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3 text-zinc-700">
+		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Inset</span>
-			<span class="text-zinc-500">{inset.toFixed(2)}rem</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{inset.toFixed(2)}rem</span>
 		</div>
 		<Slider bind:value={inset} min={0} max={1} step="any" />
 	</div>
 	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3 text-zinc-700">
-			<span class="font-medium">Border color</span>
-			<span class="text-zinc-500">{borderColor}</span>
+		<div class="hstack items-center justify-between gap-3">
+			<span class="font-medium">Primary color</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{primaryColor}</span>
 		</div>
 		<input
-			bind:value={borderColor}
+			bind:value={primaryColor}
 			type="color"
 			class="h-10 w-full cursor-pointer rounded-md border border-zinc-200 bg-white p-1"
 		/>
 	</div>
 	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3 text-zinc-700">
-			<span class="font-medium">Primary color</span>
-			<span class="text-zinc-500">{primaryColor}</span>
+		<div class="hstack items-center justify-between gap-3">
+			<span class="font-medium">Secondary color</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{secondaryColor}</span>
 		</div>
 		<input
-			bind:value={primaryColor}
+			bind:value={secondaryColor}
+			type="color"
+			class="h-10 w-full cursor-pointer rounded-md border border-zinc-200 bg-white p-1"
+		/>
+	</div>
+	<div class="vstack gap-2">
+		<div class="hstack items-center justify-between gap-3">
+			<span class="font-medium">Background color</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{backgroundColor}</span>
+		</div>
+		<input
+			bind:value={backgroundColor}
+			type="color"
+			class="h-10 w-full cursor-pointer rounded-md border border-zinc-200 bg-white p-1"
+		/>
+	</div>
+	<div class="vstack gap-2">
+		<div class="hstack items-center justify-between gap-3">
+			<span class="font-medium">Border color</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{borderColor}</span>
+		</div>
+		<input
+			bind:value={borderColor}
 			type="color"
 			class="h-10 w-full cursor-pointer rounded-md border border-zinc-200 bg-white p-1"
 		/>
 	</div>
 	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3 text-zinc-700">
+		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Active color</span>
-			<span class="text-zinc-500">{activeColor}</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{activeColor}</span>
 		</div>
 		<input
 			bind:value={activeColor}
@@ -106,9 +137,9 @@
 		/>
 	</div>
 	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3 text-zinc-700">
+		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Inactive color</span>
-			<span class="text-zinc-500">{inactiveColor}</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{inactiveColor}</span>
 		</div>
 		<input
 			bind:value={inactiveColor}

package/dist/components/Local/StyleControls.svelte.d.ts

@@ -7,9 +7,11 @@ type Props = {
     inset?: number;
     borderColor?: string;
     primaryColor?: string;
+    secondaryColor?: string;
     activeColor?: string;
     inactiveColor?: string;
+    backgroundColor?: string;
 };
-declare const StyleControls: import("svelte").Component<Props, {}, "borderColor" | "borderRadius" | "fontSize" | "gap" | "inset" | "paddingX" | "paddingY" | "primaryColor" | "activeColor" | "inactiveColor">;
+declare const StyleControls: import("svelte").Component<Props, {}, "backgroundColor" | "borderColor" | "borderRadius" | "fontSize" | "gap" | "inset" | "paddingX" | "paddingY" | "primaryColor" | "secondaryColor" | "activeColor" | "inactiveColor">;
 type StyleControls = ReturnType<typeof StyleControls>;
 export default StyleControls;

package/dist/index.d.ts

@@ -43,7 +43,8 @@ export { default as Popover } from './components/Library/Popover';
 export { default as ChipInput } from './components/Library/ChipInput';
 export { default as Calendar } from './components/Library/Calendar';
 export { default as AsyncButton } from './components/Library/AsyncButton';
-export { default as SearchInput } from './components/Library/SearchInput';
+export { default as SearchField } from './components/Library/SearchField';
 export { default as ScrollView } from './components/Library/ScrollView';
-export { default as TokenSearchInput } from './components/Library/TokenSearchInput';
+export type { ScrollGeometry } from './components/Library/ScrollView';
+export { default as TokenSearchField } from './components/Library/TokenSearchField';
 export { default as VStack } from './components/Library/VStack';

package/dist/index.js

@@ -36,7 +36,7 @@ export { default as Popover } from './components/Library/Popover';
 export { default as ChipInput } from './components/Library/ChipInput';
 export { default as Calendar } from './components/Library/Calendar';
 export { default as AsyncButton } from './components/Library/AsyncButton';
-export { default as SearchInput } from './components/Library/SearchInput';
+export { default as SearchField } from './components/Library/SearchField';
 export { default as ScrollView } from './components/Library/ScrollView';
-export { default as TokenSearchInput } from './components/Library/TokenSearchInput';
+export { default as TokenSearchField } from './components/Library/TokenSearchField';
 export { default as VStack } from './components/Library/VStack';

package/dist/style/index.css

@@ -13,9 +13,11 @@
 		--sveltely-padding-y: 0.75rem;
 		--sveltely-gap: 0.5rem;
 		--sveltely-primary-color: var(--color-zinc-900);
-		--sveltely-active-color: var(--sveltely-primary-color);
-		--sveltely-inactive-color: var(--color-zinc-100);
-		--sveltely-hover-color: color-mix(in oklab, var(--sveltely-primary-color) 5%, transparent);
+		--sveltely-secondary-color: var(--color-zinc-500);
+		--sveltely-active-color: var(--color-zinc-900);
+		--sveltely-inactive-color: var(--sveltely-active-color);
+		--sveltely-background-color: white;
+		--sveltely-hover-color: color-mix(in oklab, var(--sveltely-active-color) 5%, transparent);
 		--sveltely-inactive-hover-color: color-mix(in oklab, var(--sveltely-inactive-color) 88%, white);
 		--sveltely-active-hover-color: color-mix(in oklab, var(--sveltely-active-color) 88%, white);
 		--sveltely-border-radius-nested: clamp(
@@ -29,6 +31,8 @@
 	html,
 	body {
 		@apply size-full overflow-hidden;
+		background: var(--sveltely-background-color);
+		color: var(--sveltely-primary-color);
 		-webkit-user-select: none;
 		user-select: none;
 	}
@@ -101,8 +105,8 @@
 	.segmented-picker,
 	.switch,
 	.checkbox,
-	.search-input,
-	.token-search-input,
+	.search-field,
+	.token-search-field,
 	.chip-input,
 	.dropdown,
 	.pagination,