Run prettier

.prettierignore

@@ -0,0 +1,15 @@
+.DS_Store
+node_modules
+/.svelte-kit
+/package
+.mf/
+build/
+.idea/
+.vscode/
+.vercel_build_output
+.pnpm-debug.log
+generated/
+.pnpm-store/
+locales/
+pnpm-lock.yaml
+.nuxt/

.vscode/settings.json

@@ -1,4 +1,19 @@
 {
+	"prettier.endOfLine": "lf",
+	"cSpell.words": ["unplugin"],
+	"gitlens.showWelcomeOnInstall": false,
+	"gitlens.showWhatsNewAfterUpgrades": false,
+	"gitlens.plusFeatures.enabled": false,
+	"gitlens.currentLine.enabled": false,
+	"gitlens.currentLine.pullRequests.enabled": false,
+	"gitlens.currentLine.scrollable": true,
+	"gitlens.codeLens.enabled": false,
+	"gitlens.hovers.enabled": false,
+	"svelte.enable-ts-plugin": true,
+	"svelte.ask-to-enable-ts-plugin": false,
+	"yaml.schemas": {
+		"https://json.schemastore.org/github-workflow.json": "file:///Users/sha/Code/Modrinth/knossos/.github/workflows/deploy.yml"
+	},
 	"editor.formatOnSave": true,
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"editor.formatOnPaste": true,

package.json

@@ -10,8 +10,8 @@
 		"prepare": "svelte-kit sync",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
+		"lint": "prettier --ignore-path .prettierignore --check --plugin-search-dir=. . && eslint --ignore-path .prettierignore .",
-		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
+		"format": "prettier --ignore-path .prettierignore --write --plugin-search-dir=. ."
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^1.0.0-next.29",
@@ -25,6 +25,7 @@
 		"mdsvexamples": "^0.3.0",
 		"nodemon": "^2.0.15",
 		"prettier": "^2.6.2",
+		"prettier-plugin-svelte": "^2.7.0",
 		"sveld": "^0.13.4",
 		"svelte": "^3.48.0",
 		"svelte-check": "^2.2.6",

pnpm-lock.yaml

@@ -36,6 +36,7 @@ specifiers:
   postcss-pxtorem: ^6.0.0
   postcss-strip-inline-comments: ^0.1.5
   prettier: ^2.6.2
+  prettier-plugin-svelte: ^2.7.0
   sanitize.css: ^13.0.0
   sveld: ^0.13.4
   svelte: ^3.48.0
@@ -84,7 +85,7 @@ dependencies:
 
 devDependencies:
   '@sveltejs/adapter-static': 1.0.0-next.29
-  '@sveltejs/kit': 1.0.0-next.345_svelte@3.48.0
+  '@sveltejs/kit': 1.0.0-next.348_svelte@3.48.0
   '@typescript-eslint/eslint-plugin': 5.14.0_4p27j37cxves4nxlnqogdhp4ta
   '@typescript-eslint/parser': 5.14.0_e6rt7vlgxfprtuallp2t3cvyi4
   eslint: 7.32.0
@@ -94,6 +95,7 @@ devDependencies:
   mdsvexamples: 0.3.0
   nodemon: 2.0.15
   prettier: 2.6.2
+  prettier-plugin-svelte: 2.7.0_kkjbqzpydplecjtkxrgomroeru
   sveld: 0.13.4_jw3wiphoy34i6ad2hx6ga3jifa
   svelte: 3.48.0
   svelte-check: 2.4.5_2pvebpkgu3ohgo43qaf5qmcxwm
@@ -758,14 +760,14 @@ packages:
       tiny-glob: 0.2.9
     dev: true
 
-  /@sveltejs/kit/1.0.0-next.345_svelte@3.48.0:
+  /@sveltejs/kit/1.0.0-next.348_svelte@3.48.0:
-    resolution: {integrity: sha512-2nLZoXZ02uXMSxqRAMRCr/J4aCphqgKLxEhRRyh3c3aWLAjWiDWLDcvSB770eHt3y0MkYrTvp7JrDF7RhfyuBA==}
+    resolution: {integrity: sha512-K9dfgzIbotWmbcdCsQ6ROGs9R+bsGWwmSdN6l6km1QV5esQehqg1UYHGD9q0VJsg4rJg/zmKVBYo0oBquSHPZw==}
     engines: {node: '>=16.7'}
     hasBin: true
     peerDependencies:
       svelte: ^3.44.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 1.0.0-next.44_svelte@3.48.0+vite@2.9.9
+      '@sveltejs/vite-plugin-svelte': 1.0.0-next.47_svelte@3.48.0+vite@2.9.9
       chokidar: 3.5.3
       sade: 1.8.1
       svelte: 3.48.0
@@ -778,8 +780,8 @@ packages:
       - supports-color
     dev: true
 
-  /@sveltejs/vite-plugin-svelte/1.0.0-next.44_svelte@3.48.0+vite@2.9.9:
+  /@sveltejs/vite-plugin-svelte/1.0.0-next.47_svelte@3.48.0+vite@2.9.9:
-    resolution: {integrity: sha512-n+sssEWbzykPS447FmnNyU5GxEhrBPDVd0lxNZnxRGz9P6651LjjwAnISKr3CKgT9v8IybP8VD0n2i5XzbqExg==}
+    resolution: {integrity: sha512-J6n8UN51aq/TEZGQ89/EtdXTtca3cRcTJGzi6fi+xK8LkgsHQLCZhRj+PJ+swktRSWTX9IOmQS55SqVg6bz5fA==}
     engines: {node: ^14.13.1 || >= 16}
     peerDependencies:
       diff-match-patch: ^1.0.5
@@ -795,7 +797,7 @@ packages:
       kleur: 4.1.4
       magic-string: 0.26.2
       svelte: 3.48.0
-      svelte-hmr: 0.14.11_svelte@3.48.0
+      svelte-hmr: 0.14.12_svelte@3.48.0
       vite: 2.9.9
     transitivePeerDependencies:
       - supports-color
@@ -3986,6 +3988,16 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /prettier-plugin-svelte/2.7.0_kkjbqzpydplecjtkxrgomroeru:
+    resolution: {integrity: sha512-fQhhZICprZot2IqEyoiUYLTRdumULGRvw0o4dzl5jt0jfzVWdGqeYW27QTWAeXhoupEZJULmNoH3ueJwUWFLIA==}
+    peerDependencies:
+      prettier: ^1.16.4 || ^2.0.0
+      svelte: ^3.2.0
+    dependencies:
+      prettier: 2.6.2
+      svelte: 3.48.0
+    dev: true
+
   /prettier/2.6.2:
     resolution: {integrity: sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==}
     engines: {node: '>=10.13.0'}
@@ -4519,8 +4531,8 @@ packages:
       - sugarss
     dev: true
 
-  /svelte-hmr/0.14.11_svelte@3.48.0:
+  /svelte-hmr/0.14.12_svelte@3.48.0:
-    resolution: {integrity: sha512-R9CVfX6DXxW1Kn45Jtmx+yUe+sPhrbYSUp7TkzbW0jI5fVPn6lsNG9NEs5dFg5qRhFNAoVdRw5qQDLALNKhwbQ==}
+    resolution: {integrity: sha512-4QSW/VvXuqVcFZ+RhxiR8/newmwOCTlbYIezvkeN6302YFRE8cXy0naamHcjz8Y9Ce3ITTZtrHrIL0AGfyo61w==}
     engines: {node: ^12.20 || ^14.13.1 || >= 16}
     peerDependencies:
       svelte: '>=3.19.0'

src/docs/components/Example.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-    import { Button } from 'omorphia';
+	import { Button } from 'omorphia'
-    import IconMoon from 'virtual:icons/heroicons-outline/moon';
+	import IconMoon from 'virtual:icons/heroicons-outline/moon'
-    import IconSun from 'virtual:icons/heroicons-outline/sun';
+	import IconSun from 'virtual:icons/heroicons-outline/sun'
 
-    export let meta: { raised: boolean };
+	export let meta: { raised: boolean }
 
-    let theme = 'light';
+	let theme = 'light'
-    let background = meta.raised ? 'var(--color-raised-bg)' : 'var(--color-bg)';
+	let background = meta.raised ? 'var(--color-raised-bg)' : 'var(--color-bg)'
 </script>
 
 <div class="example">
@@ -17,8 +17,7 @@
 		<div class="example__source__options">
 			<Button
 				color="primary-light"
-                on:click={() => (theme === 'light' ? (theme = 'dark') : (theme = 'light'))}
+				on:click={() => (theme === 'light' ? (theme = 'dark') : (theme = 'light'))}>
-            >
 				{#if theme === 'light'}
 					<IconMoon />
 				{:else}

src/docs/components/Header.svelte

@@ -1,23 +1,23 @@
 <script lang="ts">
-    import OmorphiaLogo from '../assets/omorphia.svg';
+	import OmorphiaLogo from '../assets/omorphia.svg'
-    import IconLogoGithub from 'virtual:icons/carbon/logo-github';
+	import IconLogoGithub from 'virtual:icons/carbon/logo-github'
-    import IconChat from 'virtual:icons/heroicons-outline/chat-alt-2';
+	import IconChat from 'virtual:icons/heroicons-outline/chat-alt-2'
-    import { onMount } from 'svelte';
+	import { onMount } from 'svelte'
 
-    let headerElement;
+	let headerElement
 
 	onMount(() => {
-        let lastScrollTop: number;
+		let lastScrollTop: number
 		window.addEventListener('scroll', () => {
-            let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+			let scrollTop = window.pageYOffset || document.documentElement.scrollTop
 			if (scrollTop > lastScrollTop && headerElement) {
-                headerElement.style.top = '-100%';
+				headerElement.style.top = '-100%'
 			} else if (headerElement) {
-                headerElement.style.top = '0';
+				headerElement.style.top = '0'
 			}
-            lastScrollTop = scrollTop;
+			lastScrollTop = scrollTop
-        });
+		})
-    });
+	})
 </script>
 
 <header class="header" bind:this={headerElement}>
@@ -50,8 +50,7 @@
 		top: 0;
 		z-index: 10;
 		background-color: hsl(0, 0%, 100%);
-        box-shadow: hsla(221, 39%, 11%, 0.2) 0 2px 4px 0,
+		box-shadow: hsla(221, 39%, 11%, 0.2) 0 2px 4px 0, hsla(221, 39%, 11%, 0.05) 0 -2px 2px 0 inset;
-            hsla(221, 39%, 11%, 0.05) 0 -2px 2px 0 inset;
 		transition: top 0.3s ease-in-out;
 
 		@media not (--sm) {

src/docs/components/Sidebar.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+	import { page } from '$app/stores'
 
-    import IconMenu from 'virtual:icons/lucide/menu';
+	import IconMenu from 'virtual:icons/lucide/menu'
 
 	const components = Object.keys(import.meta.glob('../../routes/components/**'))
 		.map((it) => it.replace('../../routes/components/', '').replace('.md', ''))
-        .sort();
+		.sort()
 
 	const classes = Object.keys(import.meta.glob('../../routes/classes/**'))
 		.map((it) => it.replace('../../routes/classes/', '').replace('.md', ''))
-        .sort();
+		.sort()
 
-    let slideIn = false;
+	let slideIn = false
 
 	$: if ($page.url.pathname) {
-        slideIn = false;
+		slideIn = false
 	}
 </script>
 
@@ -76,12 +76,7 @@
 		}
 
 		&__content {
-            mask-image: linear-gradient(
+			mask-image: linear-gradient(to bottom, transparent, hsla(0, 0%, 0%, 1) 5% 95%, transparent);
-                to bottom,
-                transparent,
-                hsla(0, 0%, 0%, 1) 5% 95%,
-                transparent
-            );
 			padding: 88px 32px 32px;
 			height: 100vh;
 			max-height: 100vh;

src/docs/layout/page.svelte

@@ -1,28 +1,28 @@
 <script lang="ts">
-    import IconPencil from 'virtual:icons/heroicons-outline/pencil';
+	import IconPencil from 'virtual:icons/heroicons-outline/pencil'
-    import { page } from '$app/stores';
+	import { page } from '$app/stores'
-    import COMPONENT_API from '../../generated/COMPONENT_API.json';
+	import COMPONENT_API from '../../generated/COMPONENT_API.json'
 
 	export let fileName = $page.url.pathname
 		.substring($page.url.pathname.lastIndexOf('/') + 1)
-        .replace('.html', '');
+		.replace('.html', '')
 
-    export let title = fileName;
+	export let title = fileName
 
-    export let description = 'Learn about Omorphia, the component & style library';
+	export let description = 'Learn about Omorphia, the component & style library'
 
 	let editUrl = `https://github.com/modrinth/omorphia/edit/main/src/routes/${
 		$page.url.pathname.replace('/', '') || 'index'
-    }.md`;
+	}.md`
 
-    let api;
+	let api
 	if ($page.url.pathname.includes('components')) {
 		if (import.meta.env.DEV) {
 			import(`../../../package/components/${title}.svelte?raw&sveld`).then(
 				(output) => (api = output.default)
-            );
+			)
 		} else {
-            api = COMPONENT_API[`${title}.svelte`];
+			api = COMPONENT_API[`${title}.svelte`]
 		}
 	}
 </script>
@@ -35,8 +35,7 @@
 {#if title}<h1>{title}</h1>{/if}
 <a class="edit-link" href={editUrl}>
 	<IconPencil />
-    Edit this page on GitHub</a
+	Edit this page on GitHub</a>
->
 <slot />
 
 {#if api}
@@ -59,11 +58,8 @@
 							<td><code>{prop.type ?? ''}</code></td>
 							<td><code>{prop.value ?? ''}</code></td>
 							<td
-                                >{prop.constant ? '[Read only] ' : ''}{prop.description?.replace(
+								>{prop.constant ? '[Read only] ' : ''}{prop.description?.replace('null', '') ||
-                                    'null',
+									''}</td>
-                                    ''
-                                ) || ''}</td
-                            >
 						</tr>
 					{/each}
 				</tbody>

src/package/components/Avatar.svelte

@@ -1,40 +1,40 @@
 <script lang="ts">
 	// TODO: Make square icon `md` more rounded
 
-    import { onMount } from 'svelte';
+	import { onMount } from 'svelte'
-    import { classCombine } from '../utils/classCombine';
+	import { classCombine } from '../utils/classCombine'
 
 	/** Optional, as a default icon will be substituted if no image was specified */
-    export let src: string | undefined;
+	export let src: string | undefined
-    export let size: 'xs' | 'sm' | 'md' | 'lg';
+	export let size: 'xs' | 'sm' | 'md' | 'lg'
-    export let circle = false;
+	export let circle = false
-    export let floatUp = false;
+	export let floatUp = false
 
-    let className: string;
+	let className: string
 	$: className = classCombine([
 		'avatar',
 		circle && 'avatar--circle',
 		`avatar--size-${size}`,
 		floatUp && 'avatar--float-up',
-    ]);
+	])
 
-    let img;
+	let img
 
 	onMount(() => {
 		if (img && img.naturalWidth) {
 			const isPixelated = () => {
 				if (img.naturalWidth < 96 && img.naturalWidth > 0) {
-                    img.style = 'image-rendering: pixelated;';
+					img.style = 'image-rendering: pixelated;'
+				}
 			}
-            };
 
 			if (img.naturalWidth) {
-                isPixelated();
+				isPixelated()
 			} else {
-                img.onload = isPixelated;
+				img.onload = isPixelated
 			}
 		}
-    });
+	})
 </script>
 
 {#if src}
@@ -48,15 +48,13 @@
 		stroke-linejoin="round"
 		stroke-miterlimit="1.5"
 		clip-rule="evenodd"
-        viewBox="0 0 104 104"
+		viewBox="0 0 104 104">
-    >
 		<path fill="none" d="M0 0h103.4v103.4H0z" />
 		<path
 			fill="none"
 			stroke="#9a9a9a"
 			stroke-width="5"
-            d="M51.7 92.5V51.7L16.4 31.3l35.3 20.4L87 31.3 51.7 11 16.4 31.3v40.8l35.3 20.4L87 72V31.3L51.7 11"
+			d="M51.7 92.5V51.7L16.4 31.3l35.3 20.4L87 31.3 51.7 11 16.4 31.3v40.8l35.3 20.4L87 72V31.3L51.7 11" />
-        />
 	</svg>
 {/if}
 

src/package/components/Button.svelte

@@ -1,19 +1,18 @@
 <script lang="ts">
 	// TODO: sizes
 	// TODO: icon only buttons should have uniform padding
-    // TODO: Could be a class
 
-    import { classCombine } from '../utils/classCombine';
+	import { classCombine } from '../utils/classCombine'
 
 	/** The element to be styled as a button */
-    export let as: 'button' | 'a' | 'summary' | 'input' = 'button';
+	export let as: 'button' | 'a' | 'summary' | 'input' = 'button'
-    export let href = '';
+	export let href = ''
-    if (href) as = 'a';
+	if (href) as = 'a'
 
 	/** Use `value` if the button is an `<input`> */
-    export let value = '';
+	export let value = ''
 
-    export let size: 'sm' | 'md' | 'lg' = 'md';
+	export let size: 'sm' | 'md' | 'lg' = 'md'
 	export let color:
 		| ''
 		| 'raised'
@@ -23,26 +22,26 @@
 		| 'tertiary'
 		| 'danger'
 		| 'danger-light'
-        | 'transparent' = '';
+		| 'transparent' = ''
 
 	/** Show notification badge in the upper right of button */
-    export let badge = false;
+	export let badge = false
 
-    export let disabled = false;
+	export let disabled = false
 
 	/**  Hover title for accessibility */
-    export let title = '';
+	export let title = ''
 
 	/**  Link target */
-    export let target = '';
+	export let target = ''
 
-    let className: string;
+	let className: string
 	$: className = classCombine([
 		'button',
 		`button--size-${size}`,
 		`button--color-${color}`,
 		badge && 'has-badge',
-    ]);
+	])
 </script>
 
 {#if as === 'a'}
@@ -74,10 +73,10 @@
 		background-color: var(--color-button-bg);
 
 		border-radius: var(--rounded);
-        transition: opacity 0.5s ease-in-out, filter 0.05s ease-in-out;
+		transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out;
 
 		&:hover {
-            filter: brightness(0.9);
+			filter: brightness(0.85);
 		}
 
 		&--color {

src/package/components/Checkbox.svelte

@@ -2,18 +2,18 @@
 	import { uniqueId } from '../utils/uniqueId'
 	import IconCheck from 'virtual:icons/heroicons-outline/check'
 
-    export let checked = false;
+	export let checked = false
 
 	const id = `checkbox-${uniqueId()}`
 </script>
 
 <div class="checkbox">
-    <input type="checkbox" bind:checked={checked} on:change id={id} name={id}>
+	<input type="checkbox" bind:checked on:change {id} name={id} />
 	<label for={id} class="checkbox__label">
 		<span class="checkbox__label__box">
 			<IconCheck />
 		</span>
-        <slot/>
+		<slot />
 	</label>
 </div>
 
@@ -50,12 +50,12 @@
 					display: none;
 					width: 1rem;
 					height: 1rem;
-                    color: var(--color-raised-bg)
+					color: var(--color-raised-bg);
 				}
 			}
 		}
 
-        [type=checkbox]:checked + label span {
+		[type='checkbox']:checked + label span {
 			background-color: var(--color-brand);
 
 			:global(.icon) {

src/package/components/CheckboxList.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-    import Checkbox from './Checkbox.svelte';
+	import Checkbox from './Checkbox.svelte'
-    import type { Option } from './types';
+	import type { Option } from './types'
 
-    export let value = [];
+	export let value = []
-    export let options: Option[] = [];
+	export let options: Option[] = []
 
 	/** Wrap the options horizontally */
-    export let wrap = false;
+	export let wrap = false
 
 	const handleChange = (e, key) => {
 		if (e.target.checked) {
-            if (!value) value = [];
+			if (!value) value = []
-            value = [key, ...value];
+			value = [key, ...value]
 		} else {
-            value = value.filter((it) => key !== it);
+			value = value.filter((it) => key !== it)
+		}
 	}
-    };
 </script>
 
 <div class="checkbox-list" class:wrap>

src/package/components/CheckboxVirtualList.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">
 	// TODO: Add fade out styling on top and bottom
 
-    import Checkbox from './Checkbox.svelte';
+	import Checkbox from './Checkbox.svelte'
-    import VirtualList from 'svelte-tiny-virtual-list';
+	import VirtualList from 'svelte-tiny-virtual-list'
-    import type { Option } from './types';
+	import type { Option } from './types'
 
 	/** Height in pixels of list */
-    export let height = 200;
+	export let height = 200
 
-    export let value = [];
+	export let value = []
-    export let options: Option[] = [];
+	export let options: Option[] = []
 
 	const handleChange = (e, key) => {
 		if (e.target.checked) {
-            if (!value) value = [];
+			if (!value) value = []
-            value = [key, ...value];
+			value = [key, ...value]
 		} else {
-            value = value.filter((it) => key !== it);
+			value = value.filter((it) => key !== it)
+		}
 	}
-    };
 </script>
 
 <VirtualList width="100%" {height} itemCount={options.length} itemSize={26}>
@@ -27,13 +27,11 @@
 		let:index
 		let:style
 		{style}
-        style:padding-bottom={options.length - 1 === index ? '2.5rem' : ''}
+		style:padding-bottom={options.length - 1 === index ? '2.5rem' : ''}>
-    >
 		{@const option = options[index]}
 		<Checkbox
 			checked={value && value.includes(option.value)}
-            on:change={(e) => handleChange(e, option.value)}
+			on:change={(e) => handleChange(e, option.value)}>
-        >
 			{#if option.icon && typeof option.icon === 'string'}
 				{@html option.icon}
 			{:else if option.icon}

src/package/components/Chips.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-  import Button from "./Button.svelte";
+	import Button from './Button.svelte'
 	import IconCheck from 'virtual:icons/heroicons-outline/check'
 
 	interface Option {
-    label: string;
+		label: string
-    value: string | number;
+		value: string | number
 	}
 
-  export let options: Option[] = [];
+	export let options: Option[] = []
-  export let value: string | number;
+	export let value: string | number
 	// If set to true, one chip is always selected
-  export let neverEmpty = false;
+	export let neverEmpty = false
 
-  let selected: Option | null = options.find((option) => option.value === (value || ''));
+	let selected: Option | null = options.find((option) => option.value === (value || ''))
 
 	$: if (selected) {
-    value = selected.value;
+		value = selected.value
 	} else {
 		value = ''
 	}
@@ -27,11 +27,8 @@
 		<Button
 			color={isSelected ? 'primary-light' : undefined}
 			on:click={() => {
-        isSelected && !neverEmpty
+				isSelected && !neverEmpty ? (selected = null) : (selected = option)
-          ? selected = null
+			}}>
-          : selected = option
-      }}
-    >
 			{#if isSelected}
 				<IconCheck />
 			{/if}

src/package/components/FormField.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { uniqueId } from '../utils/uniqueId'
 
-    export let required = false;
+	export let required = false
-    export let label: string;
+	export let label: string
 
 	const id = `form-field-${uniqueId()}`
 </script>
@@ -14,7 +14,6 @@
 	<slot {id} />
 </div>
 
-
 <style lang="postcss">
 	.form-field {
 		display: flex;

src/package/components/NavRow.svelte

@@ -1,29 +1,29 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+	import { page } from '$app/stores'
 
 	interface Link {
-    href: string;
+		href: string
-    label: string;
+		label: string
 	}
 
-  export let links: Link[];
+	export let links: Link[]
-  export let query = '';
+	export let query = ''
 
-  export let resetScroll = false;
+	export let resetScroll = false
 
 	/** Path level in URL, zero-indexed */
-  export let level = 0;
+	export let level = 0
 
-  let path: string[];
+	let path: string[]
 	$: path = [
 		...$page.url.pathname
 			.substring(1)
 			.split('/')
 			.map((route) => '/' + route),
 		'/',
-  ];
+	]
 
-  $: basePath = path.slice(0, level).join('');
+	$: basePath = path.slice(0, level).join('')
 </script>
 
 <nav class="navigation">
@@ -37,14 +37,13 @@
 				? link.href
 				: basePath + link.href}
 			on:click={() => {
-        if (resetScroll) document.body.scrollTo(0, 0);
+				if (resetScroll) document.body.scrollTo(0, 0)
 			}}
 			class="navigation__link"
 			class:is-active={query
 				? ($page.url.searchParams.get(query) || '') === link.href
 				: path[level] === link.href || path[level] === link.href.slice(0, -1)}
-      sveltekit:noscroll={!resetScroll}>{link.label}</a
+			sveltekit:noscroll={!resetScroll}>{link.label}</a>
-    >
 	{/each}
 </nav>
 

src/package/components/Pagination.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	// TODO: Fix mobile support, currently just cuts off buttons
 
-    import IconArrowRight from 'virtual:icons/heroicons-outline/arrow-right';
+	import IconArrowRight from 'virtual:icons/heroicons-outline/arrow-right'
-    import IconArrowLeft from 'virtual:icons/heroicons-outline/arrow-left';
+	import IconArrowLeft from 'virtual:icons/heroicons-outline/arrow-left'
-    import IconMinus from 'virtual:icons/heroicons-outline/minus';
+	import IconMinus from 'virtual:icons/heroicons-outline/minus'
-    import Button from './Button.svelte';
+	import Button from './Button.svelte'
-    import { createEventDispatcher } from 'svelte';
+	import { createEventDispatcher } from 'svelte'
 
-    export let page: number;
+	export let page: number
-    export let count: number;
+	export let count: number
 
 	$: options =
 		count > 4
@@ -17,9 +17,9 @@
 				: page > 4
 				? [1, '-', page - 1, page, page + 1, '-', count]
 				: [1, 2, 3, 4, 5, '-', count]
-            : Array.from({ length: count }, (_, i) => i + 1);
+			: Array.from({ length: count }, (_, i) => i + 1)
 
-    const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher()
 </script>
 
 {#if count > 1}
@@ -37,16 +37,14 @@
 			{:else}
 				<Button
 					color={option === page ? 'primary' : 'raised'}
-                    on:click={() => dispatch('change', option)}>{option}</Button
+					on:click={() => dispatch('change', option)}>{option}</Button>
-                >
 			{/if}
 		{/each}
 		<Button
 			color="raised"
 			on:click={() => dispatch('change', page + 1)}
 			disabled={page >= count}
-            title="Next page"
+			title="Next page">
-        >
 			<IconArrowRight height="20px" />
 		</Button>
 	</div>

src/package/components/Select.svelte

@@ -5,8 +5,8 @@
 	import { onMount } from 'svelte'
 
 	interface Option {
-        label: string;
+		label: string
-        value: string | number;
+		value: string | number
 	}
 
 	export let options: Option[] = []
@@ -22,10 +22,28 @@
 		value = selected.value
 	}
 
-    const minWidth = options
+	// Returns the width of a string based on the font size and family
-			.map(it => it.label || it.value)
+	const getTextWidth = Object.assign(
-			.reduce((it, acc) => String(it).length > acc ? it : acc, '')
+		(text: string, font: string) => {
-			.length * 9
+			if (typeof document !== 'undefined') {
+				const canvas =
+					getTextWidth.canvas || (getTextWidth.canvas = document.createElement('canvas'))
+				const context = canvas.getContext('2d')
+				context.font = font
+				const metrics = context.measureText(text)
+				return metrics.width
+			} else {
+				// Return estimate if SSR
+				return text.length * 7.75
+			}
+		},
+		// Reuses the same canvas object
+		{ canvas: null }
+	)
+
+	const minWidth = Math.max(
+		...options.map((it) => getTextWidth(String(it.label || it.value), '16px Inter'))
+	)
 
 	let shouldOpenUp = false
 	let element: HTMLElement
@@ -73,26 +91,25 @@
 	class:is-open={open}
 	class:select--opens-up={shouldOpenUp}
 	use:clickOutside={() => {
-		open = false;
+		open = false
 	}}
 	bind:this={element}
 	tabindex="0"
-        on:keydown={keydown}
+	on:keydown={keydown}>
->
 	<div
 		class="select__input"
 		on:click={() => {
-			open = !open;
+			open = !open
-		}}
+		}}>
-    >
 		{#if icon}
-            <svelte:component this={icon}/>
+			<svelte:component this={icon} />
 		{/if}
-        <span class="select__input__value" style:min-width="{minWidth}px">{label || selected?.label || value || 'Choose...'}</span>
+		<span class="select__input__value" style:min-width="{minWidth}px"
+			>{label || selected?.label || value || 'Choose...'}</span>
 		{#if !icon}
 			<div class="select__input__arrow">
 				<slot name="expandIcon">
-                    <IconChevronDown/>
+					<IconChevronDown />
 				</slot>
 			</div>
 		{/if}
@@ -102,11 +119,10 @@
 			{#each options as option (option.value)}
 				<li
 					on:click={() => {
-						selected = option;
+						selected = option
-						open = false;
+						open = false
 					}}
-                        class:is-selected={selected?.value === option.value}
+					class:is-selected={selected?.value === option.value}>
-                >
 					{option.label || option.value}
 				</li>
 			{/each}

src/package/components/Slider.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-    export let value: number;
+	export let value: number
-    export let min: number;
+	export let min: number
-    export let max: number;
+	export let max: number
-    export let id: string = undefined;
+	export let id: string = undefined
 </script>
 
 <div class="slider">

src/package/components/TextInput.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-    import type { SvelteComponent } from 'svelte';
+	import type { SvelteComponent } from 'svelte'
 
-    export let placeholder = '';
+	export let placeholder = ''
-    export let icon: SvelteComponent = undefined;
+	export let icon: SvelteComponent = undefined
-    export let value = '';
+	export let value = ''
-    export let multiline = false;
+	export let multiline = false
-    export let id: string = undefined;
+	export let id: string = undefined
 </script>
 
 <div class="text-input">

src/package/plugins/generator/outputs/tags.js

@@ -43,7 +43,15 @@ export async function tags(API_URL) {
 	// Write JSON file
 	await fs.writeFile(
 		'./generated/tags.json',
-		JSON.stringify({ categories, loaders, projectTypes, licenses, donationPlatforms, reportTypes, tagIcons })
+		JSON.stringify({
+			categories,
+			loaders,
+			projectTypes,
+			licenses,
+			donationPlatforms,
+			reportTypes,
+			tagIcons,
+		})
 	)
 	progressBar.increment()
 

src/routes/__layout.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-    import '$package/styles.postcss';
+	import '$package/styles.postcss'
-    import '../docs/styles/prism-one-dark.css';
+	import '../docs/styles/prism-one-dark.css'
-    import '../docs/styles/gh-markdown.postcss';
+	import '../docs/styles/gh-markdown.postcss'
-    import Sidebar from '../docs/components/Sidebar.svelte';
+	import Sidebar from '../docs/components/Sidebar.svelte'
-    import Header from '../docs/components/Header.svelte';
+	import Header from '../docs/components/Header.svelte'
 </script>
 
 <div class="app theme-light">

src/routes/classes/Actions.md

@@ -6,9 +6,9 @@
 </script>
 
 <div class="actions">
-    <Button><IconHeartSolid /> Unfollow </Button>
+	<Button><IconHeartSolid /> Unfollow</Button>
 	<span class="stat">
-      <IconCalendar/>
+		<IconCalendar />
 		Updated 12 days ago
 	</span>
 </div>

src/routes/classes/Base.md

@@ -1,7 +1,5 @@
 Base should be applied to a "root" element, like `<body>`, to provide base styles for common things like text. The theme mode, `light-theme`, `dark-theme`, or `oled-theme`, should also be added to this element.
 
 ```svelte example
-<div class="base theme-light">
+<div class="base theme-light">...</div>
- ...
-</div>
 ```

src/routes/classes/Card.md

@@ -5,7 +5,9 @@
 	<h3>Moon/Distance to Earth</h3>
 	<h2>238,900 mi</h2>
 	<p>
-       The moon's distance from Earth affects the strength of ocean tides and the appearance of solar eclipses in our skies. The average distance between the blue planet and its only natural satellite is about 238,855 miles (384,400 kilometers), according to NASA.
+		The moon's distance from Earth affects the strength of ocean tides and the appearance of solar
+		eclipses in our skies. The average distance between the blue planet and its only natural
+		satellite is about 238,855 miles (384,400 kilometers), according to NASA.
 	</p>
 </div>
 ```
@@ -14,17 +16,17 @@
 
 ```svelte example
 <script lang="ts">
-    import { Button } from "omorphia";
+	import { Button } from 'omorphia'
 	import IconPencil from 'virtual:icons/heroicons-outline/pencil'
-    import { Avatar } from "omorphia";
+	import { Avatar } from 'omorphia'
 </script>
 
 <div class="card">
 	<div class="card__overlay">
 		<Button color="raised"><IconPencil /> Edit</Button>
 	</div>
-   <div class="card__banner card__banner--short card__banner--dark" ></div>
+	<div class="card__banner card__banner--short card__banner--dark" />
-   <Avatar size="md" floatUp/>
+	<Avatar size="md" floatUp />
 	<h1 class="title">Project</h1>
 	<p class="summary">A project that has a description right here.</p>
 </div>

src/routes/classes/InfoTable.md

@@ -1,10 +1,10 @@
 ```svelte example raised
-  <div class="info-table">
+<div class="info-table">
 	<span class="info-table__label">License</span>
 	<a href="#mit" class="link">MIT</a>
 	<span class="info-table__label">Project ID</span>
 	<span>11223344</span>
 	<span class="info-table__label">Visibilty</span>
 	<span>Approved</span>
-  </div>
+</div>
 ```

src/routes/classes/Member.md

@@ -1,10 +1,10 @@
 ```svelte example raised
 <script lang="ts">
-    import { Avatar } from "omorphia";
+	import { Avatar } from 'omorphia'
 </script>
 
 <a class="member" href="#user">
-  <Avatar src="https://avatars1.githubusercontent.com/u/6166773" size="sm" circle/>
+	<Avatar src="https://avatars1.githubusercontent.com/u/6166773" size="sm" circle />
 	<div class="member__info">
 		<span class="member__info__link">Prospector</span>
 		<span>Owner</span>

src/routes/classes/Stat.md

@@ -6,7 +6,7 @@
 </script>
 
 <div class="stat">
-  <IconStar/>
+	<IconStar />
 	123K stars
 </div>
 ```
@@ -21,11 +21,11 @@
 
 <div class="stat-group">
 	<div class="stat">
-      <IconDownload/>
+		<IconDownload />
 		4.1B downloads
 	</div>
 	<div class="stat stat--light">
-      <IconHeart/>
+		<IconHeart />
 		3 followers
 	</div>
 </div>

src/routes/classes/Tags.md

@@ -6,10 +6,10 @@
 
 <div class="tag-group">
 	<div class="tag">
-      <IconCarrot/> Food
+		<IconCarrot /> Food
 	</div>
 	<div class="tag">
-      <IconGlobe/> World generation
+		<IconGlobe /> World generation
 	</div>
 </div>
 ```

src/routes/components/Avatar.md

@@ -2,12 +2,14 @@ Avatars are used for project icons and user profile pictures. Low resolution ima
 
 ```svelte example raised
 <script lang="ts">
-    import { Avatar } from "omorphia";
+	import { Avatar } from 'omorphia'
 </script>
 
 <Avatar size="lg" circle src="https://avatars3.githubusercontent.com/u/44736536?v=4" />
 <Avatar size="md" src="https://cdn.modrinth.com/data/AANobbMI/icon.png" />
-<Avatar size="md" src="https://staging-cdn.modrinth.com/data/d1SqMrzw/9a39b0c80a49976b0c04053682708374e18105fe.png" />
+<Avatar
+	size="md"
+	src="https://staging-cdn.modrinth.com/data/d1SqMrzw/9a39b0c80a49976b0c04053682708374e18105fe.png" />
 <Avatar size="sm" />
 <Avatar size="xs" circle src="https://avatars1.githubusercontent.com/u/6166773?v=4" />
 ```

src/routes/components/Badge.md

@@ -1,6 +1,6 @@
 ```svelte example raised
 <script lang="ts">
-    import { Badge } from "omorphia";
+	import { Badge } from 'omorphia'
 </script>
 
 <Badge color="red" label="Tomato" />

src/routes/components/Button.md

@@ -2,7 +2,7 @@
 
 ```svelte example
 <script lang="ts">
-    import { Button } from "omorphia";
+	import { Button } from 'omorphia'
 	import IconDownload from 'virtual:icons/heroicons-outline/download'
 </script>
 
@@ -13,7 +13,7 @@
 
 ```svelte example raised
 <script lang="ts">
-    import { Button } from "omorphia";
+	import { Button } from 'omorphia'
 	import IconDownload from 'virtual:icons/heroicons-outline/download'
 </script>
 
@@ -35,13 +35,13 @@
 
 ```svelte example raised
 <script lang="ts">
-    import { Button } from "omorphia";
+	import { Button } from 'omorphia'
 	import IconDownload from 'virtual:icons/heroicons-outline/download'
 	import IconHeart from 'virtual:icons/heroicons-outline/heart'
 </script>
 
 <div class="button-group">
 	<Button color="primary"><IconDownload /></Button>
-    <Button><IconHeart /> Follow mod </Button>
+	<Button><IconHeart /> Follow mod</Button>
 </div>
 ```

src/routes/components/Checkbox.md

@@ -2,7 +2,7 @@
 
 ```svelte example raised
 <script lang="ts">
-    import { Checkbox } from "omorphia";
+	import { Checkbox } from 'omorphia'
 </script>
 
 <Checkbox>Extra components</Checkbox>
@@ -12,9 +12,9 @@
 
 ```svelte example raised
 <script lang="ts">
-    import { Checkbox } from "omorphia";
+	import { Checkbox } from 'omorphia'
 	import IconCarrot from 'virtual:icons/lucide/carrot'
 </script>
 
-<Checkbox><IconCarrot /> Food </Checkbox>
+<Checkbox><IconCarrot /> Food</Checkbox>
 ```

src/routes/components/CheckboxList.md

@@ -1,6 +1,6 @@
 ```svelte example raised
 <script lang="ts">
-    import { CheckboxList } from "omorphia";
+	import { CheckboxList } from 'omorphia'
 	import IconSquare from 'virtual:icons/lucide/square'
 	import IconCircle from 'virtual:icons/lucide/circle'
 	import IconTriangle from 'virtual:icons/lucide/triangle'
@@ -30,8 +30,7 @@
 			label: 'Blank',
 			value: 'BLA',
 		},
-    ]}
+	]} />
-/>
 
 Selected: {selected}
 ```

src/routes/components/CheckboxVirtualList.md

@@ -1,11 +1,12 @@
 ```svelte example raised
 <script lang="ts">
-    import { CheckboxVirtualList } from "omorphia";
+	import { CheckboxVirtualList } from 'omorphia'
 	import IconStar from 'virtual:icons/heroicons-outline/star'
 	import { uniqueId } from 'omorphia/utils/uniqueId'
 
-    let options = Array(100).fill({})
+	let options = Array(100)
-        .map(option => ({
+		.fill({})
+		.map((option) => ({
 			label: 'Star-' + uniqueId(),
 			icon: IconStar,
 			value: uniqueId(),
@@ -14,10 +15,7 @@
 	let selected = ['2', '6']
 </script>
 
-<CheckboxVirtualList
+<CheckboxVirtualList bind:value={selected} {options} />
-    bind:value={selected}
-    {options}
-/>
 
 Selected: {selected}
 ```

src/routes/components/Chips.md

@@ -2,42 +2,46 @@
 
 ```svelte example raised
 <script lang="ts">
-    import { Chips } from "omorphia";
+	import { Chips } from 'omorphia'
 </script>
 
-<Chips options={[
+<Chips
+	options={[
 		{
 			label: 'One',
-        value: 'one'
+			value: 'one',
 		},
 		{
 			label: 'Two',
-        value: 'two'
+			value: 'two',
-    }]}
+		},
-/>
+	]} />
 ```
 
 ### Force an option to be selected with `neverEmpty`
 
 ```svelte example raised
 <script lang="ts">
-    import { Chips } from "omorphia";
+	import { Chips } from 'omorphia'
 
 	let foo = 'modpack'
 </script>
 
-<Chips neverEmpty bind:value={foo} options={[
+<Chips
+	neverEmpty
+	bind:value={foo}
+	options={[
 		{
 			label: 'Mod',
-        value: 'mod'
+			value: 'mod',
 		},
 		{
 			label: 'Modpack',
-        value: 'modpack'
+			value: 'modpack',
 		},
 		{
 			label: 'World',
-        value: 'world'
+			value: 'world',
-    }]}
+		},
-/>
+	]} />
 ```

src/routes/components/FormField.md

@@ -1,12 +1,12 @@
 ```svelte example raised
 <script lang="ts">
-    import { FormField } from "omorphia";
+	import { FormField } from 'omorphia'
-    import { Slider } from "omorphia";
+	import { Slider } from 'omorphia'
-    import { TextInput } from "omorphia";
+	import { TextInput } from 'omorphia'
 </script>
 
 <FormField label="Favorite number">
-    <Slider min=0 max=100 value=69 />
+	<Slider min="0" max="100" value="69" />
 </FormField>
 <FormField label="Favorite color">
 	<TextInput placeholder="Enter another color..." />

src/routes/components/NavRow.md

@@ -2,7 +2,7 @@
 
 ```svelte example raised
 <script lang="ts">
-    import { NavRow } from "omorphia";
+	import { NavRow } from 'omorphia'
 </script>
 
 <NavRow
@@ -10,16 +10,16 @@
 	links={[
 		{
 			href: '/Button',
-            label: 'Button'
+			label: 'Button',
 		},
 		{
 			href: '/Chips',
-            label: 'Chips'
+			label: 'Chips',
 		},
 		{
 			href: '/NavRow',
-            label: 'NavRow'
+			label: 'NavRow',
-        }
+		},
 	]}>
 	Click for fun
 </NavRow>

src/routes/components/Pagination.md

@@ -2,7 +2,7 @@ Use pagination to show a set of page numbers and navigation directions to move t
 
 ```svelte example
 <script lang="ts">
-    import { Pagination } from "omorphia"
+	import { Pagination } from 'omorphia'
 </script>
 
 <Pagination page={20} count={50} />

src/routes/components/Select.md

@@ -1,19 +1,17 @@
 ```svelte example raised
 <script lang="ts">
-    import { Select } from "omorphia";
+	import { Select } from 'omorphia'
 
-    let sortMethod = "downloads"
+	let sortMethod = 'downloads'
 </script>
 
 <Select
-    color="raised"
 	options={[
-        { value: "", label: "Relevance" },
+		{ value: '', label: 'Relevance' },
-        { value: "downloads", label: "Downloads" },
+		{ value: 'downloads', label: 'Downloads' },
-        { value: "follows", label: "Followers" },
+		{ value: 'follows', label: 'Followers' },
-        { value: "newest", label: "Recently created" },
+		{ value: 'newest', label: 'Recently' },
-        { value: "updated", label: "Recently updated" },
+		{ value: 'updated', label: 'Recently updated really fast whoot' },
 	]}
-    bind:value={sortMethod}
+	bind:value={sortMethod} />
-/>
 ```

src/routes/components/Slider.md

@@ -1,7 +1,7 @@
 ```svelte example raised
 <script lang="ts">
-    import { Slider } from "omorphia";
+	import { Slider } from 'omorphia'
 </script>
 
-<Slider min=0 max=10 value=4 />
+<Slider min="0" max="10" value="4" />
 ```

src/routes/components/TextInput.md

@@ -1,6 +1,6 @@
 ```svelte example raised
 <script lang="ts">
-    import { TextInput } from "omorphia";
+	import { TextInput } from 'omorphia'
 	import IconSearch from 'virtual:icons/heroicons-outline/search'
 </script>
 

src/routes/getting-started/icons.md

@@ -23,5 +23,5 @@ Then use the icon as if it were a Svelte component:
 	import IconHeart from 'virtual:icons/heroicons-outline/heart'
 </script>
 
-<p> That's lovely <IconHeart height="14px" />! </p>
+<p>That's lovely <IconHeart height="14px" />!</p>
 ```

src/routes/getting-started/utils.md

@@ -14,9 +14,10 @@ The `markdown` parser is designed for bodies of markdown text and supports image
 
 ```svelte example
 <script lang="ts">
-  import { markdown } from "omorphia/utils"
+	import { markdown } from 'omorphia/utils'
 
-  const source = '## Example markdown \n\
+	const source =
+		'## Example markdown \n\
   This is **some** *text*! \n\
   #### An image \n\
   <img src="https://cdn.modrinth.com/data/YL57xq9U/images/d382106b9a2b943d06107c31c139c77849f1a0e8.png" />'
@@ -33,9 +34,9 @@ The `markdownInline` parser is perfect for translations and short bios. It doesn
 
 ```svelte example raised
 <script lang="ts">
-  import { markdownInline } from "omorphia/utils"
+	import { markdownInline } from 'omorphia/utils'
 
-  const source = "This is some **bolded** and *italicized* text."
+	const source = 'This is some **bolded** and *italicized* text.'
 </script>
 
 <p>{@html markdownInline(source)}</p>
@@ -45,7 +46,7 @@ The `markdownInline` parser is perfect for translations and short bios. It doesn
 
 ```svelte example raised
 <script lang="ts">
-  import { ago } from 'omorphia/utils';
+	import { ago } from 'omorphia/utils'
 </script>
 
 <p>Something happened {ago(Date.now())}.</p>
@@ -60,18 +61,18 @@ The `Permissions` class provides an easy way to manage user permissions.
 
 ```svelte example raised
 <script lang="ts">
-import { Permissions } from 'omorphia/utils'
+	import { Permissions } from 'omorphia/utils'
 
-const permissions = new Permissions(128) // Can be integer or 'ALL'
+	const permissions = new Permissions(128) // Can be integer or 'ALL'
 </script>
 
 <p>
-  <input type="checkbox" bind:checked={permissions.uploadVersions} id="ex-1"/>
+	<input type="checkbox" bind:checked={permissions.uploadVersions} id="ex-1" />
-  <label for="ex-1">Can edit versions</label><br>
+	<label for="ex-1">Can edit versions</label><br />
-  <input type="checkbox" bind:checked={permissions.deleteProject} id="ex-2"/>
+	<input type="checkbox" bind:checked={permissions.deleteProject} id="ex-2" />
-  <label for="ex-2">Can delete project</label><br><br>
+	<label for="ex-2">Can delete project</label><br /><br />
 
-  Integer: {permissions.toInteger()}<br>
+	Integer: {permissions.toInteger()}<br />
 	Can access settings page: {permissions.settingsPage}
 </p>
 ```
@@ -82,8 +83,8 @@ The `formatVersions` function provides an easy way to parse a project's versions
 
 ```svelte example raised
 <script lang="ts">
-  import { formatVersions } from 'omorphia/utils';
+	import { formatVersions } from 'omorphia/utils'
 </script>
 
-<p>{formatVersions(["1.18", "1.18.1", "1.18.2", "1.17.1"])}</p>
+<p>{formatVersions(['1.18', '1.18.1', '1.18.2', '1.17.1'])}</p>
 ```

src/routes/index.md

@@ -22,7 +22,7 @@ Use a component by importing from `omorphia`. For example, use the [Button compo
 
 ```svelte example raised
 <script lang="ts">
-    import { Button } from "omorphia"
+	import { Button } from 'omorphia'
 </script>
 
 <Button color="primary">I'm a button!</Button>