upgrade ui and run linter

.prettierrc

@@ -1,16 +0,0 @@
-{
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
-	"overrides": [
-		{
-			"files": "*.svelte",
-			"options": {
-				"parser": "svelte"
-			}
-		}
-	],
-	"tailwindStylesheet": "./src/routes/layout.css"
-}

eslint.config.js

@@ -1,11 +1,12 @@
-import prettier from 'eslint-config-prettier';
-import { fileURLToPath } from 'node:url';
 import { includeIgnoreFile } from '@eslint/compat';
 import js from '@eslint/js';
+import prettier from 'eslint-config-prettier';
 import svelte from 'eslint-plugin-svelte';
-import { defineConfig } from 'eslint/config';
+import { defineConfig, globalIgnores } from 'eslint/config';
 import globals from 'globals';
+import { fileURLToPath } from 'node:url';
 import ts from 'typescript-eslint';
+
 import svelteConfig from './svelte.config.js';
 
 const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
@@ -44,5 +45,6 @@ export default defineConfig(
 				svelteConfig
 			}
 		}
-	}
+	},
+	globalIgnores(['src/lib/components/ui/**/*'], 'Ignore Shadcn Component Directory')
 );

package-lock.json

@@ -22,6 +22,7 @@
 				"@sveltejs/kit": "^2.49.1",
 				"@sveltejs/vite-plugin-svelte": "^6.2.1",
 				"@tailwindcss/vite": "^4.1.17",
+				"@trivago/prettier-plugin-sort-imports": "^6.0.0",
 				"@types/node": "^24",
 				"@vitest/browser-playwright": "^4.0.15",
 				"bits-ui": "^2.15.4",
@@ -48,6 +49,132 @@
 				"vitest-browser-svelte": "^2.0.1"
 			}
 		},
+		"node_modules/@babel/code-frame": {
+			"version": "7.29.0",
+			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
+			"integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-validator-identifier": "^7.28.5",
+				"js-tokens": "^4.0.0",
+				"picocolors": "^1.1.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/generator": {
+			"version": "7.29.1",
+			"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
+			"integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/parser": "^7.29.0",
+				"@babel/types": "^7.29.0",
+				"@jridgewell/gen-mapping": "^0.3.12",
+				"@jridgewell/trace-mapping": "^0.3.28",
+				"jsesc": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-globals": {
+			"version": "7.28.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+			"integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-string-parser": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+			"integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-validator-identifier": {
+			"version": "7.28.5",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+			"integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/parser": {
+			"version": "7.29.0",
+			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
+			"integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/types": "^7.29.0"
+			},
+			"bin": {
+				"parser": "bin/babel-parser.js"
+			},
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@babel/template": {
+			"version": "7.28.6",
+			"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
+			"integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/code-frame": "^7.28.6",
+				"@babel/parser": "^7.28.6",
+				"@babel/types": "^7.28.6"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/traverse": {
+			"version": "7.29.0",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
+			"integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/code-frame": "^7.29.0",
+				"@babel/generator": "^7.29.0",
+				"@babel/helper-globals": "^7.28.0",
+				"@babel/parser": "^7.29.0",
+				"@babel/template": "^7.28.6",
+				"@babel/types": "^7.29.0",
+				"debug": "^4.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/types": {
+			"version": "7.29.0",
+			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
+			"integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-string-parser": "^7.27.1",
+				"@babel/helper-validator-identifier": "^7.28.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
 		"node_modules/@esbuild/aix-ppc64": {
 			"version": "0.27.2",
 			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz",
@@ -1572,6 +1699,73 @@
 				"vite": "^5.2.0 || ^6 || ^7"
 			}
 		},
+		"node_modules/@trivago/prettier-plugin-sort-imports": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-6.0.2.tgz",
+			"integrity": "sha512-3DgfkukFyC/sE/VuYjaUUWoFfuVjPK55vOFDsxD56XXynFMCZDYFogH2l/hDfOsQAm1myoU/1xByJ3tWqtulXA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@babel/generator": "^7.28.0",
+				"@babel/parser": "^7.28.0",
+				"@babel/traverse": "^7.28.0",
+				"@babel/types": "^7.28.0",
+				"javascript-natural-sort": "^0.7.1",
+				"lodash-es": "^4.17.21",
+				"minimatch": "^9.0.0",
+				"parse-imports-exports": "^0.2.4"
+			},
+			"engines": {
+				"node": ">= 20"
+			},
+			"peerDependencies": {
+				"@vue/compiler-sfc": "3.x",
+				"prettier": "2.x - 3.x",
+				"prettier-plugin-ember-template-tag": ">= 2.0.0",
+				"prettier-plugin-svelte": "3.x",
+				"svelte": "4.x || 5.x"
+			},
+			"peerDependenciesMeta": {
+				"@vue/compiler-sfc": {
+					"optional": true
+				},
+				"prettier-plugin-ember-template-tag": {
+					"optional": true
+				},
+				"prettier-plugin-svelte": {
+					"optional": true
+				},
+				"svelte": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@trivago/prettier-plugin-sort-imports/node_modules/brace-expansion": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+			"integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/@trivago/prettier-plugin-sort-imports/node_modules/minimatch": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
 		"node_modules/@types/chai": {
 			"version": "5.2.3",
 			"resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
@@ -2958,6 +3152,13 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/javascript-natural-sort": {
+			"version": "0.7.1",
+			"resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+			"integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/jiti": {
 			"version": "2.6.1",
 			"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
@@ -2968,6 +3169,13 @@
 				"jiti": "lib/jiti-cli.mjs"
 			}
 		},
+		"node_modules/js-tokens": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/js-yaml": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
@@ -2981,6 +3189,19 @@
 				"js-yaml": "bin/js-yaml.js"
 			}
 		},
+		"node_modules/jsesc": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+			"integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"jsesc": "bin/jsesc"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/json-buffer": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
@@ -3336,6 +3557,13 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/lodash-es": {
+			"version": "4.17.23",
+			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.23.tgz",
+			"integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/lodash.merge": {
 			"version": "4.6.2",
 			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3528,6 +3756,23 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/parse-imports-exports": {
+			"version": "0.2.4",
+			"resolved": "https://registry.npmjs.org/parse-imports-exports/-/parse-imports-exports-0.2.4.tgz",
+			"integrity": "sha512-4s6vd6dx1AotCx/RCI2m7t7GCh5bDRUtGNvRfHSP2wbBQdMi67pPe7mtzmgwcaQ8VKK/6IB7Glfyu3qdZJPybQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"parse-statements": "1.0.11"
+			}
+		},
+		"node_modules/parse-statements": {
+			"version": "1.0.11",
+			"resolved": "https://registry.npmjs.org/parse-statements/-/parse-statements-1.0.11.tgz",
+			"integrity": "sha512-HlsyYdMBnbPQ9Jr/VgJ1YF4scnldvJpJxCVx6KgqPL4dxppsWrJHCIIxQXMJrqGnsRkNPATbeMJ8Yxu7JMsYcA==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/path-exists": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",

package.json

@@ -13,7 +13,8 @@
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint .",
 		"test:unit": "vitest",
-		"test": "npm run test:unit -- --run"
+		"test": "npm run test:unit -- --run",
+		"upgrade:ui": "npx shadcn-svelte@latest add alert button card checkbox dialog input label select separator switch -y -o && prettier --write src/lib/components/ui"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.4.0",
@@ -24,6 +25,7 @@
 		"@sveltejs/kit": "^2.49.1",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
 		"@tailwindcss/vite": "^4.1.17",
+		"@trivago/prettier-plugin-sort-imports": "^6.0.0",
 		"@types/node": "^24",
 		"@vitest/browser-playwright": "^4.0.15",
 		"bits-ui": "^2.15.4",

prettier.config.js

@@ -0,0 +1,35 @@
+export default {
+	useTabs: true,
+	singleQuote: true,
+	trailingComma: 'none',
+	printWidth: 100,
+	importOrder: [
+		'^svelte($|/)',
+		'<THIRD_PARTY_MODULES>',
+		'\\$app/',
+		'\\$lib/stores',
+		'\\$lib/utils',
+		'\\$lib/components',
+		'\\$lib/assets',
+		'\\$lib',
+		'^~/',
+		'^\\.',
+		'<THIRD_PARTY_TS_TYPES>',
+		'<TS_TYPES>'
+	],
+	importOrderSeparation: true,
+	importOrderSortSpecifiers: true,
+	plugins: [
+		'prettier-plugin-svelte',
+		'prettier-plugin-tailwindcss',
+		'@trivago/prettier-plugin-sort-imports'
+	],
+	overrides: [
+		{
+			files: '*.svelte',
+			options: {
+				parser: 'svelte'
+			}
+		}
+	]
+};

src/demo.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 describe('sum test', () => {
 	it('adds 1 + 2 to equal 3', () => {

src/lib/components/location/location-search.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { createEventDispatcher, onDestroy } from 'svelte';
+
 	import { type GeoLocation } from '$lib/stores/settings';
+
 	import * as Alert from '$lib/components/ui/alert';
 	import { Button } from '$lib/components/ui/button';
 	import * as Dialog from '$lib/components/ui/dialog';

src/lib/components/navigation/weather-nav.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { page } from '$app/stores';
-	import { Button } from '$lib/components/ui/button';
 	import { resolve } from '$app/paths';
+	import { page } from '$app/stores';
+
+	import { Button } from '$lib/components/ui/button';
 
 	const links = [
 		{

src/lib/components/ui/alert/alert-description.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { type WithElementRef, cn } from '$lib/utils/ui.js';
+
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/ui.js';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +15,7 @@
 	bind:this={ref}
 	data-slot="alert-description"
 	class={cn(
-		'col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed',
+		'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
 		className
 	)}
 	{...restProps}

src/lib/components/ui/alert/alert-title.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { type WithElementRef, cn } from '$lib/utils/ui.js';
+
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/ui.js';
 
 	let {
 		ref = $bindable(null),

src/lib/components/ui/alert/alert.svelte

@@ -19,8 +19,9 @@
 </script>
 
 <script lang="ts">
+	import { type WithElementRef, cn } from '$lib/utils/ui.js';
+
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/ui.js';
 
 	let {
 		ref = $bindable(null),

src/lib/components/ui/alert/index.ts

@@ -1,6 +1,7 @@
-import Root from './alert.svelte';
 import Description from './alert-description.svelte';
 import Title from './alert-title.svelte';
+import Root from './alert.svelte';
+
 export { alertVariants, type AlertVariant } from './alert.svelte';
 
 export {

src/lib/components/ui/button/button.svelte

@@ -1,8 +1,10 @@
 <script lang="ts" module>
-	import { cn, type WithElementRef } from '$lib/utils/ui.js';
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 	import { type VariantProps, tv } from 'tailwind-variants';
 
+	import { type WithElementRef, cn } from '$lib/utils/ui.js';
+
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+
 	export const buttonVariants = tv({
 		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		variants: {

src/lib/components/ui/card/card-action.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/index.js';
+	import { type WithElementRef, cn } from '$lib/utils/ui.js';
+
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {

src/lib/components/ui/card/card-content.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { type WithElementRef, cn } from '$lib/utils/ui.js';
+
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/index.js';
 
 	let {
 		ref = $bindable(null),

src/lib/components/ui/card/card-description.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { type WithElementRef, cn } from '$lib/utils/ui.js';
+
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/index.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +14,7 @@
 <p
 	bind:this={ref}
 	data-slot="card-description"
-	class={cn('text-sm text-muted-foreground', className)}
+	class={cn('text-muted-foreground text-sm', className)}
 	{...restProps}
 >
 	{@render children?.()}

src/lib/components/ui/card/card-footer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/index.js';
+	import { type WithElementRef, cn } from '$lib/utils/ui.js';
+
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {

src/lib/components/ui/card/card-header.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/index.js';
+	import { type WithElementRef, cn } from '$lib/utils/ui.js';
+
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {

src/lib/components/ui/card/card-title.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { type WithElementRef, cn } from '$lib/utils/ui.js';
+
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/index.js';
 
 	let {
 		ref = $bindable(null),

src/lib/components/ui/card/card.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { type WithElementRef, cn } from '$lib/utils/ui.js';
+
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/index.js';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +15,7 @@
 	bind:this={ref}
 	data-slot="card"
 	class={cn(
-		'flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm',
+		'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
 		className
 	)}
 	{...restProps}

src/lib/components/ui/card/index.ts

@@ -1,10 +1,10 @@
-import Root from './card.svelte';
+import Action from './card-action.svelte';
 import Content from './card-content.svelte';
 import Description from './card-description.svelte';
 import Footer from './card-footer.svelte';
 import Header from './card-header.svelte';
 import Title from './card-title.svelte';
-import Action from './card-action.svelte';
+import Root from './card.svelte';
 
 export {
 	Root,

src/lib/components/ui/checkbox/checkbox.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
 	import CheckIcon from '@lucide/svelte/icons/check';
 	import MinusIcon from '@lucide/svelte/icons/minus';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/ui.js';
+	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+
+	import { type WithoutChildrenOrChild, cn } from '$lib/utils/ui.js';
 
 	let {
 		ref = $bindable(null),
@@ -17,7 +18,7 @@
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		'peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
+		'border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
 		className
 	)}
 	bind:checked

src/lib/components/ui/checkbox/index.ts

@@ -1,4 +1,5 @@
 import Root from './checkbox.svelte';
+
 export {
 	Root,
 	//

src/lib/components/ui/dialog/dialog-content.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from 'bits-ui';
-	import DialogPortal from './dialog-portal.svelte';
 	import XIcon from '@lucide/svelte/icons/x';
-	import type { Snippet } from 'svelte';
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	import { type WithoutChildrenOrChild, cn } from '$lib/utils/ui.js';
+
+	import DialogPortal from './dialog-portal.svelte';
 	import * as Dialog from './index.js';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/ui.js';
+
+	import type { Snippet } from 'svelte';
 	import type { ComponentProps } from 'svelte';
 
 	let {
@@ -27,7 +30,7 @@
 		bind:ref
 		data-slot="dialog-content"
 		class={cn(
-			'fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg',
+			'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
 			className
 		)}
 		{...restProps}
@@ -35,7 +38,7 @@
 		{@render children?.()}
 		{#if showCloseButton}
 			<DialogPrimitive.Close
-				class="absolute end-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+				class="ring-offset-background focus:ring-ring absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
 			>
 				<XIcon />
 				<span class="sr-only">Close</span>

src/lib/components/ui/dialog/dialog-description.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from 'bits-ui';
+
 	import { cn } from '$lib/utils/ui.js';
 
 	let {
@@ -12,6 +13,6 @@
 <DialogPrimitive.Description
 	bind:ref
 	data-slot="dialog-description"
-	class={cn('text-sm text-muted-foreground', className)}
+	class={cn('text-muted-foreground text-sm', className)}
 	{...restProps}
 />

src/lib/components/ui/dialog/dialog-footer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/ui.js';
+	import { type WithElementRef, cn } from '$lib/utils/ui.js';
+
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {

src/lib/components/ui/dialog/dialog-header.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { type WithElementRef, cn } from '$lib/utils/ui.js';
+
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/ui.js';
 
 	let {
 		ref = $bindable(null),

src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from 'bits-ui';
+
 	import { cn } from '$lib/utils/ui.js';
 
 	let {
@@ -13,7 +14,7 @@
 	bind:ref
 	data-slot="dialog-overlay"
 	class={cn(
-		'fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
+		'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
 		className
 	)}
 	{...restProps}

src/lib/components/ui/dialog/dialog-title.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from 'bits-ui';
+
 	import { cn } from '$lib/utils/ui.js';
 
 	let {

src/lib/components/ui/dialog/index.ts

@@ -1,13 +1,13 @@
-import Root from './dialog.svelte';
+import Close from './dialog-close.svelte';
-import Portal from './dialog-portal.svelte';
+import Content from './dialog-content.svelte';
-import Title from './dialog-title.svelte';
+import Description from './dialog-description.svelte';
 import Footer from './dialog-footer.svelte';
 import Header from './dialog-header.svelte';
 import Overlay from './dialog-overlay.svelte';
-import Content from './dialog-content.svelte';
+import Portal from './dialog-portal.svelte';
-import Description from './dialog-description.svelte';
+import Title from './dialog-title.svelte';
 import Trigger from './dialog-trigger.svelte';
-import Close from './dialog-close.svelte';
+import Root from './dialog.svelte';
 
 export {
 	Root,

src/lib/components/ui/input/input.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { type WithElementRef, cn } from '$lib/utils/ui.js';
+
 	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/ui.js';
 
 	type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
 
@@ -25,9 +26,9 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			'flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs ring-offset-background transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
+			'selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50',
-			'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+			'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-			'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
+			'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
 			className
 		)}
 		type="file"
@@ -40,9 +41,9 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			'flex h-9 w-full min-w-0 rounded-md border border-input bg-background px-3 py-1 text-base shadow-xs ring-offset-background transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30',
+			'border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-			'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+			'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-			'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
+			'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
 			className
 		)}
 		{type}

src/lib/components/ui/label/label.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Label as LabelPrimitive } from 'bits-ui';
+
 	import { cn } from '$lib/utils/ui.js';
 
 	let {

src/lib/components/ui/select/index.ts

@@ -1,14 +1,14 @@
-import Root from './select.svelte';
-import Group from './select-group.svelte';
-import Label from './select-label.svelte';
-import Item from './select-item.svelte';
 import Content from './select-content.svelte';
-import Trigger from './select-trigger.svelte';
+import GroupHeading from './select-group-heading.svelte';
-import Separator from './select-separator.svelte';
+import Group from './select-group.svelte';
+import Item from './select-item.svelte';
+import Label from './select-label.svelte';
+import Portal from './select-portal.svelte';
 import ScrollDownButton from './select-scroll-down-button.svelte';
 import ScrollUpButton from './select-scroll-up-button.svelte';
-import GroupHeading from './select-group-heading.svelte';
+import Separator from './select-separator.svelte';
-import Portal from './select-portal.svelte';
+import Trigger from './select-trigger.svelte';
+import Root from './select.svelte';
 
 export {
 	Root,

src/lib/components/ui/select/select-content.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
 	import { Select as SelectPrimitive } from 'bits-ui';
+
+	import { type WithoutChild, cn } from '$lib/utils/ui.js';
+
 	import SelectPortal from './select-portal.svelte';
-	import SelectScrollUpButton from './select-scroll-up-button.svelte';
 	import SelectScrollDownButton from './select-scroll-down-button.svelte';
-	import { cn, type WithoutChild } from '$lib/utils/ui.js';
+	import SelectScrollUpButton from './select-scroll-up-button.svelte';
-	import type { ComponentProps } from 'svelte';
+
 	import type { WithoutChildrenOrChild } from '$lib/utils/ui.js';
+	import type { ComponentProps } from 'svelte';
 
 	let {
 		ref = $bindable(null),
@@ -27,7 +30,7 @@
 		{preventScroll}
 		data-slot="select-content"
 		class={cn(
-			'relative z-50 max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:translate-y-1 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:-translate-x-1 data-[side=left]:slide-in-from-end-2 data-[side=right]:translate-x-1 data-[side=right]:slide-in-from-start-2 data-[side=top]:-translate-y-1 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+			'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
 			className
 		)}
 		{...restProps}

src/lib/components/ui/select/select-group-heading.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { Select as SelectPrimitive } from 'bits-ui';
+
 	import { cn } from '$lib/utils/ui.js';
+
 	import type { ComponentProps } from 'svelte';
 
 	let {
@@ -14,7 +16,7 @@
 <SelectPrimitive.GroupHeading
 	bind:ref
 	data-slot="select-group-heading"
-	class={cn('px-2 py-1.5 text-xs text-muted-foreground', className)}
+	class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
 	{...restProps}
 >
 	{@render children?.()}

src/lib/components/ui/select/select-item.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import CheckIcon from '@lucide/svelte/icons/check';
 	import { Select as SelectPrimitive } from 'bits-ui';
-	import { cn, type WithoutChild } from '$lib/utils/ui.js';
+
+	import { type WithoutChild, cn } from '$lib/utils/ui.js';
 
 	let {
 		ref = $bindable(null),
@@ -18,7 +19,7 @@
 	{value}
 	data-slot="select-item"
 	class={cn(
-		"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
 		className
 	)}
 	{...restProps}

src/lib/components/ui/select/select-label.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/ui.js';
+	import { type WithElementRef, cn } from '$lib/utils/ui.js';
+
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
@@ -13,7 +14,7 @@
 <div
 	bind:this={ref}
 	data-slot="select-label"
-	class={cn('px-2 py-1.5 text-xs text-muted-foreground', className)}
+	class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
 	{...restProps}
 >
 	{@render children?.()}

src/lib/components/ui/select/select-scroll-down-button.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 	import { Select as SelectPrimitive } from 'bits-ui';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/ui.js';
+
+	import { type WithoutChildrenOrChild, cn } from '$lib/utils/ui.js';
 
 	let {
 		ref = $bindable(null),

src/lib/components/ui/select/select-scroll-up-button.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
 	import { Select as SelectPrimitive } from 'bits-ui';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/ui.js';
+
+	import { type WithoutChildrenOrChild, cn } from '$lib/utils/ui.js';
 
 	let {
 		ref = $bindable(null),

src/lib/components/ui/select/select-separator.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-	import type { Separator as SeparatorPrimitive } from 'bits-ui';
-	import { Separator } from '$lib/components/ui/separator/index.js';
 	import { cn } from '$lib/utils/ui.js';
 
+	import { Separator } from '$lib/components/ui/separator/index.js';
+
+	import type { Separator as SeparatorPrimitive } from 'bits-ui';
+
 	let {
 		ref = $bindable(null),
 		class: className,
@@ -13,6 +15,6 @@
 <Separator
 	bind:ref
 	data-slot="select-separator"
-	class={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}
+	class={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
 	{...restProps}
 />

src/lib/components/ui/select/select-trigger.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
 	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
-	import { cn, type WithoutChild } from '$lib/utils/ui.js';
+	import { Select as SelectPrimitive } from 'bits-ui';
+
+	import { type WithoutChild, cn } from '$lib/utils/ui.js';
 
 	let {
 		ref = $bindable(null),
@@ -19,7 +20,7 @@
 	data-slot="select-trigger"
 	data-size={size}
 	class={cn(
-		"flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+		"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}

src/lib/components/ui/separator/separator.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Separator as SeparatorPrimitive } from 'bits-ui';
+
 	import { cn } from '$lib/utils/ui.js';
 
 	let {
@@ -14,7 +15,7 @@
 	bind:ref
 	data-slot={dataSlot}
 	class={cn(
-		'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+		'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:min-h-full data-[orientation=vertical]:w-px',
 		className
 	)}
 	{...restProps}

src/lib/components/ui/switch/switch.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Switch as SwitchPrimitive } from 'bits-ui';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/ui.js';
+
+	import { type WithoutChildrenOrChild, cn } from '$lib/utils/ui.js';
 
 	let {
 		ref = $bindable(null),
@@ -15,7 +16,7 @@
 	bind:checked
 	data-slot="switch"
 	class={cn(
-		'peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80',
+		'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
 		className
 	)}
 	{...restProps}
@@ -23,7 +24,7 @@
 	<SwitchPrimitive.Thumb
 		data-slot="switch-thumb"
 		class={cn(
-			'pointer-events-none block size-4 rounded-full bg-background ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground'
+			'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
 		)}
 	/>
 </SwitchPrimitive.Root>

src/lib/utils/ui.ts

@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from 'clsx';
+import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {

src/routes/+layout.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import './layout.css';
 	import favicon from '$lib/assets/favicon.svg';
 
+	import './layout.css';
+
 	let { children } = $props();
 </script>
 

src/routes/+page.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { fade, fly } from 'svelte/transition';
+
+	import { storedLocation } from '$lib/stores/settings';
+
 	import { Button } from '$lib/components/ui/button';
 	import {
 		Card,
@@ -9,8 +12,6 @@
 		CardHeader,
 		CardTitle
 	} from '$lib/components/ui/card';
-	import { storedLocation } from '$lib/stores/settings';
-	import { get } from 'svelte/store';
 
 	let mounted = $state(false);
 	let location = $derived($storedLocation);

src/routes/page.svelte.spec.ts

@@ -1,6 +1,7 @@
-import { page } from 'vitest/browser';
 import { describe, expect, it } from 'vitest';
 import { render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+
 import Page from './+page.svelte';
 
 describe('/+page.svelte', () => {

src/routes/weather/+layout.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
-	import { fly, fade } from 'svelte/transition';
 	import { onMount } from 'svelte';
-	import WeatherNav from '$lib/components/navigation/weather-nav.svelte';
-	import LocationSearch from '$lib/components/location/location-search.svelte';
-	import { storedLocation } from '$lib/stores/settings';
 	import { get } from 'svelte/store';
+	import { fade, fly } from 'svelte/transition';
+
 	import { page } from '$app/stores';
 
+	import { storedLocation } from '$lib/stores/settings';
+
+	import LocationSearch from '$lib/components/location/location-search.svelte';
+	import WeatherNav from '$lib/components/navigation/weather-nav.svelte';
+
 	interface Props {
 		children?: import('svelte').Snippet;
 	}

src/routes/weather/+page.ts

@@ -1,4 +1,5 @@
 import { redirect } from '@sveltejs/kit';
+
 import type { PageLoad } from './$types';
 
 export const prerender = true;

src/routes/weather/canvas/temp-gradient.ts

@@ -1,6 +1,7 @@
-import type { ConfigInterface } from '../config';
 import { getColor } from '../utils/colors';
 
+import type { ConfigInterface } from '../config';
+
 export default (
 	ctx: CanvasRenderingContext2D | null | undefined,
 	config: ConfigInterface,

src/routes/weather/week/+page.ts

@@ -1,7 +1,11 @@
 import { get } from 'svelte/store';
+
 import { redirect } from '@sveltejs/kit';
+
 import { storedLocation } from '$lib/stores/settings';
+
 import { geoLocationNameToRoute } from '$lib/utils/meteo';
+
 import type { PageLoad } from './$types';
 
 export const prerender = true;

src/routes/weather/week/[location]/+page.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
 	import { onMount, tick } from 'svelte';
+	import { SvelteDate } from 'svelte/reactivity';
 	import { fade } from 'svelte/transition';
+
 	import { fetchWeatherApi } from 'openmeteo';
 
 	import { storedLocation } from '$lib/stores/settings';
-	import type { WeatherApiResponse } from '@openmeteo/sdk/weather-api-response';
-	import type { VariableWithValues } from '@openmeteo/sdk/variable-with-values';
 	import { urlHashStore } from '$lib/stores/url-hash-store';
 
+	import { pad } from '$lib/utils/index.js';
+
 	import { Label } from '$lib/components/ui/label';
 	import * as Select from '$lib/components/ui/select';
 
@@ -16,12 +18,13 @@
 	import precip from '../../canvas/precip';
 	import raster from '../../canvas/raster';
 	import tempGradient from '../../canvas/temp-gradient';
-	import type { ConfigInterface } from '../../config';
 	import { defaultParameters, models } from '../../options';
 	import { getColor, textWhite } from '../../utils/colors';
 	import weatherCodes from '../../utils/weather-codes';
-	import { SvelteDate } from 'svelte/reactivity';
+
-	import { pad } from '$lib/utils/index.js';
+	import type { ConfigInterface } from '../../config';
+	import type { VariableWithValues } from '@openmeteo/sdk/variable-with-values';
+	import type { WeatherApiResponse } from '@openmeteo/sdk/weather-api-response';
 
 	// --- Interfaces ---
 

vite.config.ts

@@ -1,7 +1,7 @@
-import tailwindcss from '@tailwindcss/vite';
-import { defineConfig } from 'vitest/config';
-import { playwright } from '@vitest/browser-playwright';
 import { sveltekit } from '@sveltejs/kit/vite';
+import tailwindcss from '@tailwindcss/vite';
+import { playwright } from '@vitest/browser-playwright';
+import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
 	plugins: [tailwindcss(), sveltekit()],