chore: improve lit highlighting, mention on Form's homepage

app/components/DocsLayout.tsx

@@ -276,6 +276,8 @@ export function DocsLayout({
                                   ? 'text-sky-500'
                                   : child.badge === 'solid'
                                   ? 'text-blue-500'
+                                  : child.badge === 'lit'
+                                  ? 'text-blue-500'
                                   : child.badge === 'svelte'
                                   ? 'text-orange-500'
                                   : child.badge === 'vue'

app/routes/_index.tsx

@@ -80,7 +80,7 @@ const libraries = [
       `shadow-xl shadow-yellow-700/20 dark:shadow-lg dark:shadow-yellow-500/30 text-yellow-500 border-2 border-transparent hover:border-current`,
     to: '/form',
     tagline: `Headless UI for building performant and type-safe forms`,
-    description: `Headless, performant, and type-safe form state management for TS/JS, React, Solid, Svelte and Vue`,
+    description: `Headless, performant, and type-safe form state management for TS/JS, React, Solid, Vue, and Lit`,
     badge: (
       <div className="uppercase text-white bg-yellow-500 rounded-full px-2 py-1 text-xs font-black animate-pulse">
         New

app/routes/form.$version._index.tsx

@@ -155,7 +155,7 @@ export default function RouteVersion() {
             <span className="underline decoration-dashed decoration-yellow-500 decoration-3 underline-offset-2">
               Headless, performant, and type-safe
             </span>{' '}
-            form state management for TS/JS, React, Solid, and Vue
+            form state management for TS/JS, React, Solid, Vue, and Lit
           </h2>
           <p
             className="text opacity-90 max-w-[500px]
@@ -366,6 +366,7 @@ export default function RouteVersion() {
                   { label: 'React', value: 'react' },
                   { label: 'Solid', value: 'solid' },
                   { label: 'Vue', value: 'vue' },
+                  { label: 'Lit', value: 'lit' },
                 ] as const
               ).map((item) => (
                 <button

app/routes/form.tsx

@@ -6,9 +6,9 @@ import { Scarf } from '~/components/Scarf'
 
 export const meta: MetaFunction = () => {
   return seo({
-    title: 'TanStack Form | React Form, Solid Form, Svelte Form, Vue Form',
+    title: 'TanStack Form | React Form, Solid Form, Vue Form, Lit Form',
     description:
-      'Simple, performant, type-safe forms for TS/JS, React, Solid, Svelte and Vue',
+      'Simple, performant, type-safe forms for TS/JS, React, Solid, Vue, and Lit',
     image: 'https://github.com/tanstack/form/raw/main/media/repo-header.png',
   })
 }

app/routes/store.tsx

@@ -5,7 +5,7 @@ import { seo } from '~/utils/seo'
 
 export const meta: MetaFunction = () => {
   return seo({
-    title: 'TanStack Store | React Store, Solid Store, Svelte Store, Vue Store',
+    title: 'TanStack Store | React Store, Solid Store, Vue Store',
     description:
       'Framework agnostic, type-safe store w/ reactive framework adapters',
     image: 'https://github.com/tanstack/store/raw/main/media/repo-header.png',