@x33025/sveltely 0.1.1 → 0.1.3

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

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

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

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

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.demo.svelte

@@ -0,0 +1,14 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'TextField',
+		description: 'Token-aware text input with help and error states.'
+	};
+</script>
+
+<script lang="ts">
+	import TextField from './TextField.svelte';
+
+	let value = $state('Sveltely');
+</script>
+
+<TextField bind:value placeholder="Enter name" help="Value: {value}" />

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

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

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

@@ -0,0 +1,154 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { tooltip } from '../../../actions/tooltip';
+	import { surfaceStyle, type StyleProps } from '../../../style/surface';
+	import {
+		textEditorStyle,
+		type TextEditorProps,
+		type TextFieldType,
+		type TextInputMode
+	} from '../../../style/text-editor';
+
+	type Props = {
+		value?: string;
+		help?: string;
+		error?: string | null;
+		type?: TextFieldType;
+		disabled?: boolean;
+		placeholder?: string;
+		name?: string;
+		autocomplete?: HTMLInputAttributes['autocomplete'];
+		required?: boolean;
+		readonly?: boolean;
+		inputmode?: TextInputMode;
+	} & StyleProps &
+		TextEditorProps;
+
+	let {
+		value = $bindable(''),
+		help,
+		error = null,
+		type = 'text',
+		disabled = false,
+		placeholder = '',
+		name,
+		autocomplete,
+		required = false,
+		readonly = false,
+		inputmode,
+		textAlign,
+		fontSize,
+		paddingX,
+		paddingY,
+		gap,
+		borderRadius,
+		inset,
+		background,
+		borderColor,
+		color
+	}: Props = $props();
+
+	const styleProps = $derived({
+		fontSize,
+		paddingX,
+		paddingY,
+		gap,
+		borderRadius,
+		inset,
+		background,
+		borderColor,
+		color
+	});
+	const textEditorProps = $derived({ textAlign });
+	const rootStyle = $derived.by(() =>
+		[surfaceStyle(styleProps, 'text-field'), textEditorStyle(textEditorProps)]
+			.filter(Boolean)
+			.join(' ')
+	);
+	const describedBy = $derived(help ? 'text-field-message' : undefined);
+</script>
+
+<div
+	use:tooltip={{ label: error ?? '', disabled: !error }}
+	class="text-field"
+	style={rootStyle}
+	data-disabled={disabled ? 'true' : 'false'}
+	data-error={error ? 'true' : 'false'}
+>
+	<input
+		bind:value
+		{type}
+		{disabled}
+		{name}
+		{autocomplete}
+		{required}
+		{readonly}
+		{inputmode}
+		{placeholder}
+		aria-invalid={error ? 'true' : undefined}
+		aria-describedby={describedBy}
+		class="text-field-input"
+	/>
+
+	{#if help}
+		<span id="text-field-message" class="text-field-message">{help}</span>
+	{/if}
+</div>
+
+<style>
+	.text-field {
+		display: inline-flex;
+		width: 100%;
+		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));
+	}
+
+	.text-field-input {
+		width: 100%;
+		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));
+		color: inherit;
+		line-height: 1.25rem;
+		outline: none;
+		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;
+	}
+
+	.text-field-input:focus {
+		border-color: color-mix(in oklab, var(--sveltely-active-color) 50%, white);
+	}
+
+	.text-field-input::placeholder {
+		color: var(--sveltely-secondary-color);
+	}
+
+	.text-field-message {
+		color: var(--sveltely-secondary-color);
+		font-size: calc(var(--text-field-font-size, 0.875rem) * 0.857);
+		line-height: 1.25;
+	}
+
+	.text-field[data-error='true'] .text-field-input {
+		border-color: var(--color-red-500);
+	}
+
+	.text-field[data-error='true'] .text-field-message {
+		color: var(--color-red-600);
+	}
+
+	.text-field[data-disabled='true'] {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+</style>

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

@@ -0,0 +1,19 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type StyleProps } from '../../../style/surface';
+import { type TextEditorProps, type TextFieldType, type TextInputMode } from '../../../style/text-editor';
+type Props = {
+    value?: string;
+    help?: string;
+    error?: string | null;
+    type?: TextFieldType;
+    disabled?: boolean;
+    placeholder?: string;
+    name?: string;
+    autocomplete?: HTMLInputAttributes['autocomplete'];
+    required?: boolean;
+    readonly?: boolean;
+    inputmode?: TextInputMode;
+} & StyleProps & TextEditorProps;
+declare const TextField: import("svelte").Component<Props, {}, "value">;
+type TextField = ReturnType<typeof TextField>;
+export default TextField;

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

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

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

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

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;

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/VStack/VStack.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { extractLayoutProps, layoutStyle, type LayoutProps } from '../../../style/layout';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type Props = {
+		children?: Snippet;
+	} & LayoutProps &
+		StyleProps;
+
+	let { children, ...restProps }: Props = $props();
+
+	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 rootStyle = $derived.by(() =>
+		[layoutStyle(layoutProps), surfaceStyle(styleProps, 'stack')].filter(Boolean).join(' ')
+	);
+</script>
+
+<div class="vstack" style={rootStyle}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.vstack {
+		display: flex;
+		min-width: min-content;
+		min-height: min-content;
+		flex-direction: column;
+		gap: var(--stack-gap, 0px);
+		border-radius: var(--stack-border-radius, 0px);
+		padding:
+			var(--stack-padding-y, 0px)
+			var(--stack-padding-x, 0px);
+		font-size: var(--stack-font-size, inherit);
+		--divider-width: 100%;
+		--divider-height: 1px;
+		--divider-align-self: auto;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import { type LayoutProps } from '../../../style/layout';
+import { type StyleProps } from '../../../style/surface';
+type Props = {
+    children?: Snippet;
+} & LayoutProps & StyleProps;
+declare const VStack: import("svelte").Component<Props, {}, "">;
+type VStack = ReturnType<typeof VStack>;
+export default VStack;

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

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

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

@@ -0,0 +1 @@
+export { default } from './VStack.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;
 	}