diff --git a/.gitignore b/.gitignore
index 7db15c1961..721750665f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,6 +35,7 @@ stats-hydration.json
 stats-react.json
 stats.html
 .vscode/settings.json
+.idea
 
 *.log
 .DS_Store
diff --git a/README.md b/README.md
index 5876fd0fd8..0aef50dfb6 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,7 @@ Try other [TanStack](https://tanstack.com) libraries:
 You may know **TanStack Table** by our adapter names, too!
 
 - [Angular Table](https://tanstack.com/table/v8/docs/adapters/angular-table)
+- [Lit Table](https://tanstack.com/table/v8/docs/adapters/lit-table)
 - [Qwik Table](https://tanstack.com/table/v8/docs/adapters/qwik-table)
 - [**React Table**](https://tanstack.com/table/v8/docs/adapters/react-table)
 - [Solid Table](https://tanstack.com/table/v8/docs/adapters/solid-table)
@@ -117,6 +118,7 @@ Install one of the following packages based on your framework of choice:
 ```bash
 # Npm
 npm install @tanstack/angular-table
+npm install @tanstack/lit-table
 npm install @tanstack/qwik-table
 npm install @tanstack/react-table
 npm install @tanstack/solid-table
diff --git a/docs/config.json b/docs/config.json
index 0adbeeb0a5..999ef2633f 100644
--- a/docs/config.json
+++ b/docs/config.json
@@ -40,6 +40,15 @@
             }
           ]
         },
+        {
+          "label": "lit",
+          "children": [
+            {
+              "label": "Lit Table Adapter",
+              "to": "framework/lit/lit-table"
+            }
+          ]
+        },
         {
           "label": "qwik",
           "children": [
@@ -146,6 +155,15 @@
             }
           ]
         },
+        {
+          "label": "lit",
+          "children": [
+            {
+              "label": "Table State",
+              "to": "framework/lit/guide/table-state"
+            }
+          ]
+        },
         {
           "label": "qwik",
           "children": [
@@ -423,6 +441,31 @@
             }
           ]
         },
+        {
+          "label": "lit",
+          "children": [
+            {
+              "to": "framework/lit/examples/basic",
+              "label": "Basic"
+            },
+            {
+              "to": "framework/lit/examples/column-sizing",
+              "label": "Column Sizing"
+            },
+            {
+              "to": "framework/lit/examples/filters",
+              "label": "Filters"
+            },
+            {
+              "to": "framework/lit/examples/row-selection",
+              "label": "Row Selection"
+            },
+            {
+              "to": "framework/lit/examples/sorting",
+              "label": "Sorting"
+            }
+          ]
+        },
         {
           "label": "qwik",
           "children": [
diff --git a/docs/framework/angular/angular-table.md b/docs/framework/angular/angular-table.md
index c99473a03b..9ab33d4e0d 100644
--- a/docs/framework/angular/angular-table.md
+++ b/docs/framework/angular/angular-table.md
@@ -7,7 +7,7 @@ state the "angular signals" way, providing types and the rendering implementatio
 
 ## Exports
 
-`@tanstack/angular-table` re-exports all of `@tanstack/table-core`'s and the following:
+`@tanstack/angular-table` re-exports all of `@tanstack/table-core`'s APIs and the following:
 
 ### `createAngularTable`
 
diff --git a/docs/framework/angular/guide/table-state.md b/docs/framework/angular/guide/table-state.md
index c3b94f6d58..062e898431 100644
--- a/docs/framework/angular/guide/table-state.md
+++ b/docs/framework/angular/guide/table-state.md
@@ -204,7 +204,7 @@ This is why you will see the `updater instanceof Function ? this.state.update(up
 All complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling.
 
 ```ts
-import {createAngularTable, SortingState} from '@tanstack/angular-table'
+import {createAngularTable, type SortingState} from '@tanstack/angular-table'
 
 class TableComponent {
   readonly sorting = signal<SortingState>([
diff --git a/docs/framework/lit/guide/table-state.md b/docs/framework/lit/guide/table-state.md
new file mode 100644
index 0000000000..6aee7092da
--- /dev/null
+++ b/docs/framework/lit/guide/table-state.md
@@ -0,0 +1,193 @@
+---
+title: Table State (Lit) Guide
+---
+
+## Table State (Lit) Guide
+
+TanStack Table has a simple underlying internal state management system to store and manage the state of the table. It also lets you selectively pull out any state that you need to manage in your own state management. This guide will walk you through the different ways in which you can interact with and manage the state of the table.
+
+### Accessing Table State
+
+You do not need to set up anything special in order for the table state to work. If you pass nothing into either `state`, `initialState`, or any of the `on[State]Change` table options, the table will manage its own state internally. You can access any part of this internal state by using the `table.getState()` table instance API.
+
+```ts
+private tableController = new TableController<Person>(this);
+
+render() {
+  const table = this.tableController.table({
+    columns,
+    data,
+    ...
+  })
+
+  console.log(table.getState()) //access the entire internal state
+  console.log(table.getState().rowSelection) //access just the row selection state
+  // ...
+}
+```
+
+### Custom Initial State
+
+If all you need to do for certain states is customize their initial default values, you still do not need to manage any of the state yourself. You can simply set values in the `initialState` option of the table instance.
+
+```ts
+render() {
+  const table = this.tableController.table({
+    columns,
+    data,
+    initialState: {
+      columnOrder: ['age', 'firstName', 'lastName'], //customize the initial column order
+      columnVisibility: {
+        id: false //hide the id column by default
+      },
+      expanded: true, //expand all rows by default
+      sorting: [
+        {
+          id: 'age',
+          desc: true //sort by age in descending order by default
+        }
+      ]
+    },
+  })
+
+  return html`...`;
+}
+```
+
+> **Note**: Only specify each particular state in either `initialState` or `state`, but not both. If you pass in a particular state value to both `initialState` and `state`, the initialized state in `state` will take overwrite any corresponding value in `initialState`.
+
+### Controlled State
+
+If you need easy access to the table state in other areas of your application, TanStack Table makes it easy to control and manage any or all of the table state in your own state management system. You can do this by passing in your own state and state management functions to the `state` and `on[State]Change` table options.
+
+#### Individual Controlled State
+
+You can control just the state that you need easy access to. You do NOT have to control all of the table state if you do not need to. It is recommended to only control the state that you need on a case-by-case basis.
+
+In order to control a particular state, you need to both pass in the corresponding `state` value and the `on[State]Change` function to the table instance.
+
+Let's take filtering, sorting, and pagination as an example in a "manual" server-side data fetching scenario. You can store the filtering, sorting, and pagination state in your own state management, but leave out any other state like column order, column visibility, etc. if your API does not care about those values.
+
+```jsx
+import {html} from "lit";
+
+@customElement('my-component')
+class MyComponent extends LitElement {
+  @state()
+  private _sorting: SortingState = []
+
+  render() {
+    const table = this.tableController.table({
+      columns,
+      data,
+      state: {
+        sorting: this._sorting,
+      },
+      onSortingChange: updaterOrValue => {
+        if (typeof updaterOrValue === 'function') {
+          this._sorting = updaterOrValue(this._sorting)
+        } else {
+          this._sorting = updaterOrValue
+        }
+      },
+      getSortedRowModel: getSortedRowModel(),
+      getCoreRowModel: getCoreRowModel(),
+    })
+
+    return html`...`
+  }
+}
+//...
+```
+
+#### Fully Controlled State
+
+Alternatively, you can control the entire table state with the `onStateChange` table option. It will hoist out the entire table state into your own state management system. Be careful with this approach, as you might find that raising some frequently changing state values up a component tree, like `columnSizingInfo` state`, might cause bad performance issues.
+
+A couple of more tricks may be needed to make this work. If you use the `onStateChange` table option, the initial values of the `state` must be populated with all of the relevant state values for all of the features that you want to use. You can either manually type out all of the initial state values, or use the `table.setOptions` API in a special way as shown below.
+
+```ts
+
+private tableController = new TableController<Person>(this);
+
+@state()
+private _tableState;
+
+render() {
+  const table = this.tableController.table({
+    columns,
+    data,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel()
+  })
+  const state = { ...table.initialState, ...this._tableState };
+  table.setOptions(prev => ({
+    ...prev,
+    state,
+    onStateChange: updater => {
+      this._tableState =
+        updater instanceof Function ? updater(state) : updater //any state changes will be pushed up to our own state management
+    },
+  }))
+
+  return html`...`;
+}
+```
+
+### On State Change Callbacks
+
+So far, we have seen the `on[State]Change` and `onStateChange` table options work to "hoist" the table state changes into our own state management. However, there are a few things about these using these options that you should be aware of.
+
+#### 1. **State Change Callbacks MUST have their corresponding state value in the `state` option**.
+
+Specifying an `on[State]Change` callback tells the table instance that this will be a controlled state. If you do not specify the corresponding `state` value, that state will be "frozen" with its initial value.
+
+```jsx
+@state()
+private _sorting = [];
+//...
+render() {
+  const table = this.tableController.table({
+    columns,
+    data,
+    state: {
+      sorting: this._sorting,
+    },
+    onSortingChange: updaterOrValue => {
+      if (typeof updaterOrValue === 'function') {
+        this._sorting = updaterOrValue(this._sorting)
+      } else {
+        this._sorting = updaterOrValue
+      }
+    },
+    getSortedRowModel: getSortedRowModel(),
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  return html`...`;
+}
+```
+
+#### 2. **Updaters can either be raw values or callback functions**.
+
+The `on[State]Change` and `onStateChange` callbacks work exactly like the `setState` functions in React. The updater values can either be a new state value or a callback function that takes the previous state value and returns the new state value.
+
+What implications does this have? It means that if you want to add in some extra logic in any of the `on[State]Change` callbacks, you can do so, but you need to check whether or not the new incoming updater value is a function or value.
+
+This is why you will see the `updater instanceof Function ? updater(state.value) : updater` pattern in the examples above. This pattern checks if the updater is a function, and if it is, it calls the function with the previous state value to get the new state value.
+
+### State Types
+
+All complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling.
+
+```tsx
+import { TableController, type SortingState } from '@tanstack/lit-table'
+//...
+@state()
+private _sorting: SortingState = [
+  {
+    id: 'age', //you should get autocomplete for the `id` and `desc` properties
+    desc: true,
+  }
+]
+```
diff --git a/docs/framework/lit/lit-table.md b/docs/framework/lit/lit-table.md
new file mode 100644
index 0000000000..8a5c263c9f
--- /dev/null
+++ b/docs/framework/lit/lit-table.md
@@ -0,0 +1,63 @@
+---
+title: Lit Table
+---
+
+The `@tanstack/lit-table` adapter is a wrapper around the core table logic. Most of it's job is related to managing state the "lit" way, providing types and the rendering implementation of cell/header/footer templates.
+
+## Exports
+
+`@tanstack/lit-table` re-exports all of `@tanstack/table-core`'s APIs and the following:
+
+### `TableController`
+
+Is a reactive controller that provides a `table` API that takes an `options` object and returns a table instance.
+
+```ts
+import { TableController } from '@tanstack/lit-table'
+
+@customElement('my-table-element')
+class MyTableElement extends LitElement {
+  private tableController = new TableController<Person>(this)
+
+  protected render() {
+    const table = this.tableController.table(options)
+    // ...render your table
+  }
+}
+```
+
+### `flexRender`
+
+A utility function for rendering cell/header/footer templates with dynamic values.
+
+Example:
+
+```jsx
+import { flexRender } from '@tanstack/lit-table'
+//...
+return html`
+<tbody>
+  ${table
+    .getRowModel()
+    .rows.slice(0, 10)
+    .map(
+      row => html`
+        <tr>
+          ${row
+            .getVisibleCells()
+            .map(
+              cell => html`
+                <td>
+                  ${flexRender(
+                    cell.column.columnDef.cell,
+                    cell.getContext()
+                  )}
+                </td>
+              `
+            )}
+        </tr>
+      `
+    )}
+</tbody>
+`
+```
diff --git a/docs/framework/qwik/guide/table-state.md b/docs/framework/qwik/guide/table-state.md
index 3bc8a9257c..fcc42631c2 100644
--- a/docs/framework/qwik/guide/table-state.md
+++ b/docs/framework/qwik/guide/table-state.md
@@ -167,7 +167,7 @@ This is why you will see the `updater instanceof Function ? updater(state.value)
 All complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling.
 
 ```tsx
-import { useQwikTable, SortingState } from '@tanstack/qwik-table'
+import { useQwikTable, type SortingState } from '@tanstack/qwik-table'
 //...
 const sorting = Qwik.useSignal<SortingState[]>([
   {
diff --git a/docs/framework/qwik/qwik-table.md b/docs/framework/qwik/qwik-table.md
index 517e8289e3..d7e1ade8e6 100644
--- a/docs/framework/qwik/qwik-table.md
+++ b/docs/framework/qwik/qwik-table.md
@@ -6,7 +6,7 @@ The `@tanstack/qwik-table` adapter is a wrapper around the core table logic. Mos
 
 ## Exports
 
-`@tanstack/qwik-table` re-exports all of `@tanstack/table-core`'s and the following:
+`@tanstack/qwik-table` re-exports all of `@tanstack/table-core`'s APIs and the following:
 
 ### `useQwikTable`
 
diff --git a/docs/framework/react/guide/table-state.md b/docs/framework/react/guide/table-state.md
index 84ba580665..c454c9cb23 100644
--- a/docs/framework/react/guide/table-state.md
+++ b/docs/framework/react/guide/table-state.md
@@ -193,7 +193,7 @@ const table = useReactTable({
 All complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling.
 
 ```tsx
-import { useReactTable, SortingState } from '@tanstack/react-table'
+import { useReactTable, type SortingState } from '@tanstack/react-table'
 //...
 const [sorting, setSorting] = React.useState<SortingState[]>([
   {
diff --git a/docs/framework/solid/guide/table-state.md b/docs/framework/solid/guide/table-state.md
index 796be99652..f5d2f1a62c 100644
--- a/docs/framework/solid/guide/table-state.md
+++ b/docs/framework/solid/guide/table-state.md
@@ -210,7 +210,7 @@ const table = createSolidTable({
 All complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling.
 
 ```tsx
-import { createSolidTable, SortingState } from '@tanstack/solid-table'
+import { createSolidTable, type SortingState } from '@tanstack/solid-table'
 //...
 const [sorting, setSorting] = createSignal<SortingState[]>([
   {
diff --git a/docs/framework/svelte/guide/table-state.md b/docs/framework/svelte/guide/table-state.md
index cbf2fb7cd0..db8ff045ea 100644
--- a/docs/framework/svelte/guide/table-state.md
+++ b/docs/framework/svelte/guide/table-state.md
@@ -235,7 +235,7 @@ This is why you see the `if (updater instanceof Function)` check in the `setStat
 All complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling.
 
 ```ts
-import { createSvelteTable, SortingState, Updater } from '@tanstack/svelte-table'
+import { createSvelteTable, type SortingState, type Updater } from '@tanstack/svelte-table'
 //...
 let sorting: SortingState[] = [
   {
diff --git a/docs/framework/vue/guide/table-state.md b/docs/framework/vue/guide/table-state.md
index 80d8863d07..ad76d8e7b8 100644
--- a/docs/framework/vue/guide/table-state.md
+++ b/docs/framework/vue/guide/table-state.md
@@ -193,7 +193,7 @@ This is why we have the `updater instanceof Function` check in the `setState` fu
 All complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling.
 
 ```tsx
-import { useVueTable, SortingState } from '@tanstack/vue-table'
+import { useVueTable, type SortingState } from '@tanstack/vue-table'
 //...
 const sorting = ref<SortingState[]>([
   {
diff --git a/docs/framework/vue/vue-table.md b/docs/framework/vue/vue-table.md
index b00f934947..dc1d3d2a90 100644
--- a/docs/framework/vue/vue-table.md
+++ b/docs/framework/vue/vue-table.md
@@ -6,7 +6,7 @@ The `@tanstack/vue-table` adapter is a wrapper around the core table logic. Most
 
 ## Exports
 
-`@tanstack/vue-table` re-exports all of `@tanstack/table-core`'s and the following:
+`@tanstack/vue-table` re-exports all of `@tanstack/table-core`'s APIs and the following:
 
 ### `useVueTable`
 
diff --git a/docs/installation.md b/docs/installation.md
index 904f9461a4..e2b52e78e4 100644
--- a/docs/installation.md
+++ b/docs/installation.md
@@ -62,6 +62,14 @@ npm install @tanstack/angular-table
 
 The `@tanstack/angular-table` package works with Angular 17. The Angular adapter uses a new Angular Signal implementation.
 
+## Lit Table
+
+```bash
+npm install @tanstack/lit-table
+```
+
+The `@tanstack/lit-table` package works with Lit 3.
+
 ## Table Core (no framework)
 
 ```bash
diff --git a/examples/lit/basic/.gitignore b/examples/lit/basic/.gitignore
new file mode 100644
index 0000000000..d451ff16c1
--- /dev/null
+++ b/examples/lit/basic/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/lit/basic/README.md b/examples/lit/basic/README.md
new file mode 100644
index 0000000000..b168d3c4b1
--- /dev/null
+++ b/examples/lit/basic/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`
diff --git a/examples/lit/basic/index.html b/examples/lit/basic/index.html
new file mode 100644
index 0000000000..9807874fae
--- /dev/null
+++ b/examples/lit/basic/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+    <lit-table-example></lit-table-example>
+  </body>
+</html>
diff --git a/examples/lit/basic/package.json b/examples/lit/basic/package.json
new file mode 100644
index 0000000000..38f533f99b
--- /dev/null
+++ b/examples/lit/basic/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "tanstack-lit-table-example-basic",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@tanstack/lit-table": "^8.17.0",
+    "@twind/core": "^1.1.3",
+    "@twind/preset-autoprefix": "^1.0.7",
+    "@twind/preset-tailwind": "^1.1.4",
+    "@twind/with-web-components": "^1.1.3",
+    "lit": "^3.1.3"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^5.0.5",
+    "typescript": "5.4.5",
+    "vite": "^5.2.10"
+  }
+}
diff --git a/examples/lit/basic/src/main.ts b/examples/lit/basic/src/main.ts
new file mode 100644
index 0000000000..e913a2f6d0
--- /dev/null
+++ b/examples/lit/basic/src/main.ts
@@ -0,0 +1,203 @@
+import { customElement } from 'lit/decorators.js'
+import { html, LitElement } from 'lit'
+import { repeat } from 'lit/directives/repeat.js'
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  TableController,
+} from '@tanstack/lit-table'
+import install from '@twind/with-web-components'
+import config from '../twind.config'
+
+const withTwind = install(config)
+
+type Person = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  status: string
+  progress: number
+}
+
+const columnHelper = createColumnHelper<Person>()
+
+const columns = [
+  columnHelper.accessor('firstName', {
+    cell: info => info.getValue(),
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor(row => row.lastName, {
+    id: 'lastName',
+    cell: info => html`<i>${info.getValue()}</i>`,
+    header: () => html`<span>Last Name</span>`,
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor('age', {
+    header: () => 'Age',
+    cell: info => info.renderValue(),
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor('visits', {
+    header: () => html`<span>Visits</span>`,
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor('status', {
+    header: 'Status',
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor('progress', {
+    header: 'Profile Progress',
+    footer: info => info.column.id,
+  }),
+]
+
+const data: Person[] = [
+  {
+    firstName: 'tanner',
+    lastName: 'linsley',
+    age: 24,
+    visits: 100,
+    status: 'In Relationship',
+    progress: 50,
+  },
+  {
+    firstName: 'tandy',
+    lastName: 'miller',
+    age: 40,
+    visits: 40,
+    status: 'Single',
+    progress: 80,
+  },
+  {
+    firstName: 'joe',
+    lastName: 'dirte',
+    age: 45,
+    visits: 20,
+    status: 'Complicated',
+    progress: 10,
+  },
+  {
+    firstName: 'mor',
+    lastName: 'kadosh',
+    age: 31,
+    visits: 30,
+    status: 'In Relationship',
+    progress: 90,
+  },
+]
+
+@customElement('lit-table-example')
+@withTwind
+class LitTableExample extends LitElement {
+  private tableController = new TableController<Person>(this)
+
+  protected render(): unknown {
+    const table = this.tableController.table({
+      columns,
+      data,
+      getCoreRowModel: getCoreRowModel(),
+    })
+
+    return html`
+      <table>
+        <thead>
+          ${repeat(
+            table.getHeaderGroups(),
+            headerGroup => headerGroup.id,
+            headerGroup =>
+              html`${repeat(
+                headerGroup.headers,
+                header => header.id,
+                header =>
+                  html` <th>
+                    ${header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </th>`
+              )}`
+          )}
+        </thead>
+        <tbody>
+          ${repeat(
+            table.getRowModel().rows,
+            row => row.id,
+            row => html`
+              <tr>
+                ${repeat(
+                  row.getVisibleCells(),
+                  cell => cell.id,
+                  cell =>
+                    html` <td>
+                      ${flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </td>`
+                )}
+              </tr>
+            `
+          )}
+        </tbody>
+        <tfoot>
+          ${repeat(
+            table.getFooterGroups(),
+            footerGroup => footerGroup.id,
+            footerGroup => html`
+              <tr>
+                ${repeat(
+                  footerGroup.headers,
+                  header => header.id,
+                  header => html`
+                    <th>
+                      ${header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.footer,
+                            header.getContext()
+                          )}
+                    </th>
+                  `
+                )}
+              </tr>
+            `
+          )}
+        </tfoot>
+      </table>
+      <style>
+        * {
+          font-family: sans-serif;
+          font-size: 14px;
+          box-sizing: border-box;
+        }
+
+        table {
+          border: 1px solid lightgray;
+          border-collapse: collapse;
+        }
+
+        tbody {
+          border-bottom: 1px solid lightgray;
+        }
+
+        th {
+          border-bottom: 1px solid lightgray;
+          border-right: 1px solid lightgray;
+          padding: 2px 4px;
+        }
+
+        tfoot {
+          color: gray;
+        }
+
+        tfoot th {
+          font-weight: normal;
+        }
+      </style>
+    `
+  }
+}
diff --git a/examples/lit/basic/tsconfig.json b/examples/lit/basic/tsconfig.json
new file mode 100644
index 0000000000..3141563c8a
--- /dev/null
+++ b/examples/lit/basic/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "emitDecoratorMetadata": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/lit/basic/twind.config.ts b/examples/lit/basic/twind.config.ts
new file mode 100644
index 0000000000..f7e85ff4ae
--- /dev/null
+++ b/examples/lit/basic/twind.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from '@twind/core'
+import presetAutoprefix from '@twind/preset-autoprefix'
+import presetTailwind from '@twind/preset-tailwind/base'
+
+export default defineConfig({
+  presets: [presetAutoprefix(), presetTailwind()],
+})
diff --git a/examples/lit/basic/vite.config.js b/examples/lit/basic/vite.config.js
new file mode 100644
index 0000000000..fa3b238ac6
--- /dev/null
+++ b/examples/lit/basic/vite.config.js
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import rollupReplace from '@rollup/plugin-replace'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    rollupReplace({
+      preventAssignment: true,
+      values: {
+        __DEV__: JSON.stringify(true),
+        'process.env.NODE_ENV': JSON.stringify('development'),
+      },
+    }),
+  ],
+})
diff --git a/examples/lit/column-sizing/.gitignore b/examples/lit/column-sizing/.gitignore
new file mode 100644
index 0000000000..d451ff16c1
--- /dev/null
+++ b/examples/lit/column-sizing/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/lit/column-sizing/README.md b/examples/lit/column-sizing/README.md
new file mode 100644
index 0000000000..b168d3c4b1
--- /dev/null
+++ b/examples/lit/column-sizing/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`
diff --git a/examples/lit/column-sizing/index.html b/examples/lit/column-sizing/index.html
new file mode 100644
index 0000000000..9807874fae
--- /dev/null
+++ b/examples/lit/column-sizing/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+    <lit-table-example></lit-table-example>
+  </body>
+</html>
diff --git a/examples/lit/column-sizing/package.json b/examples/lit/column-sizing/package.json
new file mode 100644
index 0000000000..cb86711636
--- /dev/null
+++ b/examples/lit/column-sizing/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "tanstack-lit-table-example-column-sizing",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@faker-js/faker": "^8.4.1",
+    "@tanstack/lit-table": "^8.17.0",
+    "lit": "^3.1.3"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^5.0.5",
+    "typescript": "5.4.5",
+    "vite": "^5.2.10"
+  }
+}
diff --git a/examples/lit/column-sizing/src/main.ts b/examples/lit/column-sizing/src/main.ts
new file mode 100644
index 0000000000..4501052943
--- /dev/null
+++ b/examples/lit/column-sizing/src/main.ts
@@ -0,0 +1,206 @@
+import { customElement } from 'lit/decorators.js'
+import { html, LitElement } from 'lit'
+import { repeat } from 'lit/directives/repeat.js'
+import { state } from 'lit/decorators/state.js'
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  TableController,
+} from '@tanstack/lit-table'
+
+import { makeData, Person } from './makeData'
+
+const columns: ColumnDef<Person>[] = [
+  {
+    accessorKey: 'firstName',
+    cell: info => info.getValue(),
+  },
+  {
+    accessorFn: row => row.lastName,
+    id: 'lastName',
+    cell: info => info.getValue(),
+    header: () => html`<span>Last Name</span>`,
+  },
+  {
+    accessorKey: 'age',
+    header: () => 'Age',
+  },
+  {
+    accessorKey: 'visits',
+    header: () => html`<span>Visits</span>`,
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+  },
+  {
+    accessorKey: 'progress',
+    header: 'Profile Progress',
+  },
+  {
+    accessorKey: 'rank',
+    header: 'Rank',
+    invertSorting: true, //invert the sorting order (golf score-like where smaller is better)
+  },
+  {
+    accessorKey: 'createdAt',
+    header: 'Created At',
+  },
+]
+
+const data: Person[] = makeData(1000)
+
+@customElement('lit-table-example')
+class LitTableExample extends LitElement {
+  @state()
+  private tableController = new TableController<Person>(this)
+
+  protected render() {
+    const table = this.tableController.table({
+      data,
+      columns,
+      columnResizeMode: 'onChange',
+      columnResizeDirection: 'ltr',
+      getCoreRowModel: getCoreRowModel(),
+      debugTable: true,
+      debugHeaders: true,
+      debugColumns: true,
+    })
+
+    return html`
+      <table style="width: ${table.getCenterTotalSize()}px">
+        <thead>
+          ${repeat(
+            table.getHeaderGroups(),
+            headerGroup => headerGroup.id,
+            headerGroup => html`
+              <tr>
+                ${headerGroup.headers.map(
+                  header => html`
+                    <th
+                      colspan="${header.colSpan}"
+                      style="width: ${header.getSize()}px"
+                    >
+                      ${flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                      ${header.isPlaceholder
+                        ? null
+                        : html`<div
+                            class="resizer ${table.options
+                              .columnResizeDirection} ${header.column.getIsResizing()
+                              ? 'is-resizing'
+                              : ''}"
+                            @dblclick="${() => header.column.resetSize()}"
+                            @mousedown="${header.getResizeHandler()}"
+                            @touchstart="${header.getResizeHandler()}"
+                          />`}
+                    </th>
+                  `
+                )}
+              </tr>
+            `
+          )}
+        </thead>
+        <tbody>
+          ${table
+            .getRowModel()
+            .rows.slice(0, 10)
+            .map(
+              row => html`
+                <tr>
+                  ${row
+                    .getVisibleCells()
+                    .map(
+                      cell => html`
+                        <td>
+                          ${flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext()
+                          )}
+                        </td>
+                      `
+                    )}
+                </tr>
+              `
+            )}
+        </tbody>
+      </table>
+      <pre>123</pre>
+      <style>
+        * {
+          font-family: sans-serif;
+          font-size: 14px;
+          box-sizing: border-box;
+        }
+
+        table {
+          border: 1px solid lightgray;
+          border-collapse: collapse;
+        }
+
+        tbody {
+          border-bottom: 1px solid lightgray;
+        }
+
+        th,
+        td {
+          border-bottom: 1px solid lightgray;
+          border-right: 1px solid lightgray;
+          padding: 2px 4px;
+        }
+
+        th {
+          padding: 2px 4px;
+          position: relative;
+          font-weight: bold;
+          text-align: center;
+          height: 30px;
+        }
+
+        tfoot {
+          color: gray;
+        }
+
+        tfoot th {
+          font-weight: normal;
+        }
+        .resizer {
+          position: absolute;
+          top: 0;
+          height: 100%;
+          width: 5px;
+          background: rgba(0, 0, 0, 0.5);
+          cursor: col-resize;
+          user-select: none;
+          touch-action: none;
+        }
+
+        .resizer.ltr {
+          right: 0;
+        }
+
+        .resizer.rtl {
+          left: 0;
+        }
+
+        .resizer.is-resizing {
+          background: blue;
+          opacity: 1;
+        }
+
+        @media (hover: hover) {
+          .resizer {
+            opacity: 0;
+          }
+
+          *:hover > .resizer {
+            opacity: 1;
+          }
+        }
+      </style>
+    `
+  }
+}
diff --git a/examples/lit/column-sizing/src/makeData.ts b/examples/lit/column-sizing/src/makeData.ts
new file mode 100644
index 0000000000..d6c0639b22
--- /dev/null
+++ b/examples/lit/column-sizing/src/makeData.ts
@@ -0,0 +1,52 @@
+import { faker } from '@faker-js/faker'
+
+export type Person = {
+  firstName: string
+  lastName: string | undefined
+  age: number
+  visits: number | undefined
+  progress: number
+  status: 'relationship' | 'complicated' | 'single'
+  rank: number
+  createdAt: Date
+  subRows?: Person[]
+}
+
+const range = (len: number) => {
+  const arr: number[] = []
+  for (let i = 0; i < len; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+const newPerson = (): Person => {
+  return {
+    firstName: faker.person.firstName(),
+    lastName: Math.random() < 0.1 ? undefined : faker.person.lastName(),
+    age: faker.number.int(40),
+    visits: Math.random() < 0.1 ? undefined : faker.number.int(1000),
+    progress: faker.number.int(100),
+    createdAt: faker.date.anytime(),
+    status: faker.helpers.shuffle<Person['status']>([
+      'relationship',
+      'complicated',
+      'single',
+    ])[0]!,
+    rank: faker.number.int(100),
+  }
+}
+
+export function makeData(...lens: number[]) {
+  const makeDataLevel = (depth = 0): Person[] => {
+    const len = lens[depth]!
+    return range(len).map((_d): Person => {
+      return {
+        ...newPerson(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }
+    })
+  }
+
+  return makeDataLevel()
+}
diff --git a/examples/lit/column-sizing/tsconfig.json b/examples/lit/column-sizing/tsconfig.json
new file mode 100644
index 0000000000..56517d3a72
--- /dev/null
+++ b/examples/lit/column-sizing/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "useDefineForClassFields": false,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/lit/filters/.gitignore b/examples/lit/filters/.gitignore
new file mode 100644
index 0000000000..d451ff16c1
--- /dev/null
+++ b/examples/lit/filters/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/lit/filters/README.md b/examples/lit/filters/README.md
new file mode 100644
index 0000000000..b168d3c4b1
--- /dev/null
+++ b/examples/lit/filters/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`
diff --git a/examples/lit/filters/index.html b/examples/lit/filters/index.html
new file mode 100644
index 0000000000..9807874fae
--- /dev/null
+++ b/examples/lit/filters/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+    <lit-table-example></lit-table-example>
+  </body>
+</html>
diff --git a/examples/lit/filters/package.json b/examples/lit/filters/package.json
new file mode 100644
index 0000000000..17b35a7b92
--- /dev/null
+++ b/examples/lit/filters/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "tanstack-lit-table-example-filters",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@faker-js/faker": "^8.4.1",
+    "@tanstack/lit-table": "^8.17.0",
+    "lit": "^3.1.3"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^5.0.5",
+    "typescript": "5.4.5",
+    "vite": "^5.2.10"
+  }
+}
diff --git a/examples/lit/filters/src/main.ts b/examples/lit/filters/src/main.ts
new file mode 100644
index 0000000000..3cb1695684
--- /dev/null
+++ b/examples/lit/filters/src/main.ts
@@ -0,0 +1,308 @@
+import { customElement, property, state } from 'lit/decorators.js'
+import { html, LitElement } from 'lit'
+import { repeat } from 'lit/directives/repeat.js'
+import {
+  Column,
+  ColumnDef,
+  ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  RowData,
+  TableController,
+} from '@tanstack/lit-table'
+import { makeData, Person } from './makeData'
+
+const columns: ColumnDef<Person, any>[] = [
+  {
+    accessorKey: 'firstName',
+    cell: info => info.getValue(),
+  },
+  {
+    accessorFn: row => row.lastName,
+    id: 'lastName',
+    cell: info => info.getValue(),
+    header: () => html`<span>Last Name</span>`,
+  },
+  {
+    accessorFn: row => `${row.firstName} ${row.lastName}`,
+    id: 'fullName',
+    header: 'Full Name',
+    cell: info => info.getValue(),
+  },
+  {
+    accessorKey: 'age',
+    header: () => 'Age',
+    meta: {
+      filterVariant: 'range',
+    },
+  },
+  {
+    accessorKey: 'visits',
+    header: () => html`<span>Visits</span>`,
+    meta: {
+      filterVariant: 'range',
+    },
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    meta: {
+      filterVariant: 'select',
+    },
+  },
+  {
+    accessorKey: 'progress',
+    header: 'Profile Progress',
+    meta: {
+      filterVariant: 'range',
+    },
+  },
+]
+
+declare module '@tanstack/lit-table' {
+  //allows us to define custom properties for our columns
+  interface ColumnMeta<TData extends RowData, TValue> {
+    filterVariant?: 'text' | 'range' | 'select'
+  }
+}
+
+const data = makeData(50_000)
+
+@customElement('column-filter')
+class ColumnFilter extends LitElement {
+  @property()
+  private column!: Column<any, {}>
+
+  private onChange(evt: InputEvent) {
+    this.column?.setFilterValue((evt.target as HTMLInputElement).value)
+  }
+
+  render() {
+    const { filterVariant } = this.column.columnDef.meta ?? {}
+    const columnFilterValue = this.column.getFilterValue()
+
+    switch (filterVariant) {
+      case 'select':
+        return html` <select
+          @change=${(e: Event) =>
+            this.column.setFilterValue((e.target as HTMLSelectElement).value)}
+        >
+          <option value="">All</option>
+          <option value="complicated">complicated</option>
+          <option value="relationship">relationship</option>
+          <option value="single">single</option>
+        </select>`
+      case 'range':
+        return html`
+          <div style="display:flex;gap:2px">
+            <input
+              type="number"
+              placeholder="Min"
+              @change="${(e: Event) =>
+                this.column.setFilterValue((old: [number, number]) => [
+                  parseInt((e.target as HTMLInputElement).value, 10),
+                  old?.[1],
+                ])}"
+              value=${(columnFilterValue as [number, number])?.[0] ?? ''}
+            />
+            <input
+              type="number"
+              placeholder="Max"
+              @change="${(e: Event) =>
+                this.column.setFilterValue((old: [number, number]) => [
+                  parseInt((e.target as HTMLInputElement).value, 10),
+                  old?.[0],
+                ])}"
+              value=${(columnFilterValue as [number, number])?.[1] ?? ''}
+            />
+          </div>
+        `
+      default:
+        return html`<input @input=${this.onChange} />`
+    }
+    return null
+  }
+}
+
+@customElement('lit-table-example')
+class LitTableExample extends LitElement {
+  private tableController = new TableController<Person>(this)
+
+  @state()
+  private _columnFilters: ColumnFiltersState = []
+
+  protected render(): unknown {
+    const table = this.tableController.table({
+      data,
+      columns,
+      filterFns: {},
+      state: {
+        columnFilters: this._columnFilters,
+      },
+      onColumnFiltersChange: updater => {
+        if (typeof updater === 'function') {
+          this._columnFilters = updater(this._columnFilters)
+        } else {
+          this._columnFilters = updater
+        }
+      },
+      getCoreRowModel: getCoreRowModel(),
+      getFilteredRowModel: getFilteredRowModel(), //client side filtering
+      getSortedRowModel: getSortedRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+      debugTable: true,
+      debugHeaders: true,
+      debugColumns: false,
+    })
+
+    return html`
+      <table>
+        <thead>
+          ${repeat(
+            table.getHeaderGroups(),
+            headerGroup => headerGroup.id,
+            headerGroup => html`
+              <tr>
+                ${repeat(
+                  headerGroup.headers,
+                  header => header.id,
+                  header => html`
+                    <th colspan="${header.colSpan}">
+                      ${header.isPlaceholder
+                        ? null
+                        : html`<div
+                              title=${header.column.getCanSort()
+                                ? header.column.getNextSortingOrder() === 'asc'
+                                  ? 'Sort ascending'
+                                  : header.column.getNextSortingOrder() ===
+                                      'desc'
+                                    ? 'Sort descending'
+                                    : 'Clear sort'
+                                : undefined}
+                              @click="${header.column.getToggleSortingHandler()}"
+                              style="cursor: ${header.column.getCanSort()
+                                ? 'pointer'
+                                : 'not-allowed'}"
+                            >
+                              ${flexRender(
+                                header.column.columnDef.header,
+                                header.getContext()
+                              )}
+                              ${{ asc: ' 🔼', desc: ' 🔽' }[
+                                header.column.getIsSorted() as string
+                              ] ?? null}
+                            </div>
+                            ${header.column.getCanFilter()
+                              ? html` <div>
+                                  <column-filter
+                                    .column="${header.column}"
+                                  ></column-filter>
+                                </div>`
+                              : null} `}
+                    </th>
+                  `
+                )}
+              </tr>
+            `
+          )}
+        </thead>
+        <tbody>
+          ${table
+            .getRowModel()
+            .rows.slice(0, 10)
+            .map(
+              row => html`
+                <tr>
+                  ${row
+                    .getVisibleCells()
+                    .map(
+                      cell => html`
+                        <td>
+                          ${flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext()
+                          )}
+                        </td>
+                      `
+                    )}
+                </tr>
+              `
+            )}
+        </tbody>
+      </table>
+      <div class="page-controls">
+        <button
+          @click=${() => table.setPageIndex(0)}
+          ?disabled="${!table.getCanPreviousPage()}"
+        >
+          <<
+        </button>
+        <button
+          @click=${() => table.previousPage()}
+          ?disabled=${!table.getCanPreviousPage()}
+        >
+          <
+        </button>
+        <button
+          @click=${() => table.nextPage()}
+          ?disabled=${!table.getCanNextPage()}
+        >
+          >
+        </button>
+        <button
+          @click=${() => table.setPageIndex(table.getPageCount() - 1)}
+          ?disabled="${!table.getCanNextPage()}"
+        >
+          >>
+        </button>
+        <span style="display: flex;gap:2px">
+          <span>Page</span>
+          <strong>
+            ${table.getState().pagination.pageIndex + 1} of
+            ${table.getPageCount()}
+          </strong>
+        </span>
+      </div>
+      <pre>${JSON.stringify(this._columnFilters, null, 2)}</pre>
+      <style>
+        * {
+          font-family: sans-serif;
+          font-size: 14px;
+          box-sizing: border-box;
+        }
+
+        table {
+          border: 1px solid lightgray;
+          border-collapse: collapse;
+        }
+
+        tbody {
+          border-bottom: 1px solid lightgray;
+        }
+
+        th {
+          border-bottom: 1px solid lightgray;
+          border-right: 1px solid lightgray;
+          padding: 2px 4px;
+        }
+
+        tfoot {
+          color: gray;
+        }
+
+        tfoot th {
+          font-weight: normal;
+        }
+
+        .page-controls {
+          display: flex;
+          gap: 10px;
+          padding: 4px 0;
+        }
+      </style>
+    `
+  }
+}
diff --git a/examples/lit/filters/src/makeData.ts b/examples/lit/filters/src/makeData.ts
new file mode 100644
index 0000000000..1a2576c988
--- /dev/null
+++ b/examples/lit/filters/src/makeData.ts
@@ -0,0 +1,48 @@
+import { faker } from '@faker-js/faker'
+
+export type Person = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  progress: number
+  status: 'relationship' | 'complicated' | 'single'
+  subRows?: Person[]
+}
+
+const range = (len: number) => {
+  const arr: number[] = []
+  for (let i = 0; i < len; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+const newPerson = (): Person => {
+  return {
+    firstName: faker.person.firstName(),
+    lastName: faker.person.lastName(),
+    age: faker.number.int(40),
+    visits: faker.number.int(1000),
+    progress: faker.number.int(100),
+    status: faker.helpers.shuffle<Person['status']>([
+      'relationship',
+      'complicated',
+      'single',
+    ])[0]!,
+  }
+}
+
+export function makeData(...lens: number[]) {
+  const makeDataLevel = (depth = 0): Person[] => {
+    const len = lens[depth]!
+    return range(len).map((): Person => {
+      return {
+        ...newPerson(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }
+    })
+  }
+
+  return makeDataLevel()
+}
diff --git a/examples/lit/filters/tsconfig.json b/examples/lit/filters/tsconfig.json
new file mode 100644
index 0000000000..9ad885e68b
--- /dev/null
+++ b/examples/lit/filters/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/lit/filters/vite.config.js b/examples/lit/filters/vite.config.js
new file mode 100644
index 0000000000..fa3b238ac6
--- /dev/null
+++ b/examples/lit/filters/vite.config.js
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import rollupReplace from '@rollup/plugin-replace'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    rollupReplace({
+      preventAssignment: true,
+      values: {
+        __DEV__: JSON.stringify(true),
+        'process.env.NODE_ENV': JSON.stringify('development'),
+      },
+    }),
+  ],
+})
diff --git a/examples/lit/row-selection/.gitignore b/examples/lit/row-selection/.gitignore
new file mode 100644
index 0000000000..d451ff16c1
--- /dev/null
+++ b/examples/lit/row-selection/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/lit/row-selection/README.md b/examples/lit/row-selection/README.md
new file mode 100644
index 0000000000..b168d3c4b1
--- /dev/null
+++ b/examples/lit/row-selection/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`
diff --git a/examples/lit/row-selection/index.html b/examples/lit/row-selection/index.html
new file mode 100644
index 0000000000..9807874fae
--- /dev/null
+++ b/examples/lit/row-selection/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+    <lit-table-example></lit-table-example>
+  </body>
+</html>
diff --git a/examples/lit/row-selection/package.json b/examples/lit/row-selection/package.json
new file mode 100644
index 0000000000..3012a23952
--- /dev/null
+++ b/examples/lit/row-selection/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "tanstack-lit-table-example-row-selection",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@faker-js/faker": "^8.4.1",
+    "@tanstack/lit-table": "^8.17.0",
+    "lit": "^3.1.3"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^5.0.5",
+    "typescript": "5.4.5",
+    "vite": "^5.2.10"
+  }
+}
diff --git a/examples/lit/row-selection/src/main.ts b/examples/lit/row-selection/src/main.ts
new file mode 100644
index 0000000000..9b146fe7f0
--- /dev/null
+++ b/examples/lit/row-selection/src/main.ts
@@ -0,0 +1,223 @@
+import { customElement, property, state } from 'lit/decorators.js'
+import { html, LitElement } from 'lit'
+import { repeat } from 'lit/directives/repeat.js'
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  TableController,
+} from '@tanstack/lit-table'
+import { makeData, Person } from './makeData'
+
+const columns: ColumnDef<Person, any>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => html`
+      <input
+        type="checkbox"
+        @change="${table.getToggleAllRowsSelectedHandler()}"
+        .checked="${table.getIsAllRowsSelected()}"
+        .indeterminate="${table.getIsSomeRowsSelected()}"
+      />
+    `,
+    cell: ({ row }) => html`
+      <input
+        type="checkbox"
+        @change="${row.getToggleSelectedHandler()}"
+        .checked="${row.getIsSelected()}"
+        ?disabled="${!row.getCanSelect()}"
+        .indeterminate="${row.getIsSomeSelected()}"
+      />
+    `,
+  },
+  {
+    accessorKey: 'firstName',
+    cell: info => info.getValue(),
+  },
+  {
+    accessorFn: row => row.lastName,
+    id: 'lastName',
+    cell: info => info.getValue(),
+    header: () => html`<span>Last Name</span>`,
+  },
+  {
+    accessorFn: row => `${row.firstName} ${row.lastName}`,
+    id: 'fullName',
+    header: 'Full Name',
+    cell: info => info.getValue(),
+  },
+  {
+    accessorKey: 'age',
+    header: () => 'Age',
+  },
+  {
+    accessorKey: 'visits',
+    header: () => html`<span>Visits</span>`,
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+  },
+  {
+    accessorKey: 'progress',
+    header: 'Profile Progress',
+  },
+]
+
+const data = makeData(50_000)
+
+@customElement('lit-table-example')
+class LitTableExample extends LitElement {
+  private tableController = new TableController<Person>(this)
+
+  @state()
+  private _rowSelection: Record<string, boolean> = {}
+
+  protected render(): unknown {
+    const table = this.tableController.table({
+      data,
+      columns,
+      filterFns: {},
+      state: {
+        rowSelection: this._rowSelection,
+      },
+      enableRowSelection: true,
+      onRowSelectionChange: updaterOrValue => {
+        if (typeof updaterOrValue === 'function') {
+          this._rowSelection = updaterOrValue(this._rowSelection)
+        } else {
+          this._rowSelection = updaterOrValue
+        }
+      },
+      getCoreRowModel: getCoreRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+      debugTable: true,
+    })
+
+    return html`
+      <table>
+        <thead>
+          ${repeat(
+            table.getHeaderGroups(),
+            headerGroup => headerGroup.id,
+            headerGroup => html`
+              <tr>
+                ${repeat(
+                  headerGroup.headers,
+                  header => header.id,
+                  header => html`
+                    <th colspan="${header.colSpan}">
+                      ${header.isPlaceholder
+                        ? null
+                        : html`<div>
+                            ${flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                          </div>`}
+                    </th>
+                  `
+                )}
+              </tr>
+            `
+          )}
+        </thead>
+        <tbody>
+          ${table
+            .getRowModel()
+            .rows.slice(0, 10)
+            .map(
+              row => html`
+                <tr>
+                  ${row
+                    .getVisibleCells()
+                    .map(
+                      cell => html`
+                        <td>
+                          ${flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext()
+                          )}
+                        </td>
+                      `
+                    )}
+                </tr>
+              `
+            )}
+        </tbody>
+      </table>
+      <div class="page-controls">
+        <button
+          @click=${() => table.setPageIndex(0)}
+          ?disabled="${!table.getCanPreviousPage()}"
+        >
+          <<
+        </button>
+        <button
+          @click=${() => table.previousPage()}
+          ?disabled=${!table.getCanPreviousPage()}
+        >
+          <
+        </button>
+        <button
+          @click=${() => table.nextPage()}
+          ?disabled=${!table.getCanNextPage()}
+        >
+          >
+        </button>
+        <button
+          @click=${() => table.setPageIndex(table.getPageCount() - 1)}
+          ?disabled="${!table.getCanNextPage()}"
+        >
+          >>
+        </button>
+        <span style="display: flex;gap:2px">
+          <span>Page</span>
+          <strong>
+            ${table.getState().pagination.pageIndex + 1} of
+            ${table.getPageCount()}
+          </strong>
+        </span>
+      </div>
+      <style>
+        * {
+          font-family: sans-serif;
+          font-size: 14px;
+          box-sizing: border-box;
+        }
+
+        table {
+          border: 1px solid lightgray;
+          border-collapse: collapse;
+        }
+
+        tbody {
+          border-bottom: 1px solid lightgray;
+        }
+
+        th {
+          border-bottom: 1px solid lightgray;
+          border-right: 1px solid lightgray;
+          padding: 2px 4px;
+        }
+
+        tfoot {
+          color: gray;
+        }
+
+        tfoot th {
+          font-weight: normal;
+        }
+
+        .page-controls {
+          display: flex;
+          gap: 10px;
+          padding: 4px 0;
+        }
+      </style>
+    `
+  }
+}
diff --git a/examples/lit/row-selection/src/makeData.ts b/examples/lit/row-selection/src/makeData.ts
new file mode 100644
index 0000000000..d6c0639b22
--- /dev/null
+++ b/examples/lit/row-selection/src/makeData.ts
@@ -0,0 +1,52 @@
+import { faker } from '@faker-js/faker'
+
+export type Person = {
+  firstName: string
+  lastName: string | undefined
+  age: number
+  visits: number | undefined
+  progress: number
+  status: 'relationship' | 'complicated' | 'single'
+  rank: number
+  createdAt: Date
+  subRows?: Person[]
+}
+
+const range = (len: number) => {
+  const arr: number[] = []
+  for (let i = 0; i < len; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+const newPerson = (): Person => {
+  return {
+    firstName: faker.person.firstName(),
+    lastName: Math.random() < 0.1 ? undefined : faker.person.lastName(),
+    age: faker.number.int(40),
+    visits: Math.random() < 0.1 ? undefined : faker.number.int(1000),
+    progress: faker.number.int(100),
+    createdAt: faker.date.anytime(),
+    status: faker.helpers.shuffle<Person['status']>([
+      'relationship',
+      'complicated',
+      'single',
+    ])[0]!,
+    rank: faker.number.int(100),
+  }
+}
+
+export function makeData(...lens: number[]) {
+  const makeDataLevel = (depth = 0): Person[] => {
+    const len = lens[depth]!
+    return range(len).map((_d): Person => {
+      return {
+        ...newPerson(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }
+    })
+  }
+
+  return makeDataLevel()
+}
diff --git a/examples/lit/row-selection/tsconfig.json b/examples/lit/row-selection/tsconfig.json
new file mode 100644
index 0000000000..056b1603c8
--- /dev/null
+++ b/examples/lit/row-selection/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/lit/row-selection/vite.config.js b/examples/lit/row-selection/vite.config.js
new file mode 100644
index 0000000000..fa3b238ac6
--- /dev/null
+++ b/examples/lit/row-selection/vite.config.js
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import rollupReplace from '@rollup/plugin-replace'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    rollupReplace({
+      preventAssignment: true,
+      values: {
+        __DEV__: JSON.stringify(true),
+        'process.env.NODE_ENV': JSON.stringify('development'),
+      },
+    }),
+  ],
+})
diff --git a/examples/lit/sorting/.gitignore b/examples/lit/sorting/.gitignore
new file mode 100644
index 0000000000..d451ff16c1
--- /dev/null
+++ b/examples/lit/sorting/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/lit/sorting/README.md b/examples/lit/sorting/README.md
new file mode 100644
index 0000000000..b168d3c4b1
--- /dev/null
+++ b/examples/lit/sorting/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`
diff --git a/examples/lit/sorting/index.html b/examples/lit/sorting/index.html
new file mode 100644
index 0000000000..9807874fae
--- /dev/null
+++ b/examples/lit/sorting/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+    <lit-table-example></lit-table-example>
+  </body>
+</html>
diff --git a/examples/lit/sorting/package.json b/examples/lit/sorting/package.json
new file mode 100644
index 0000000000..a90bf49839
--- /dev/null
+++ b/examples/lit/sorting/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "tanstack-lit-table-example-sorting",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@faker-js/faker": "^8.4.1",
+    "@tanstack/lit-table": "^8.17.0",
+    "lit": "^3.1.3"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^5.0.5",
+    "typescript": "5.4.5",
+    "vite": "^5.2.10"
+  }
+}
diff --git a/examples/lit/sorting/src/main.ts b/examples/lit/sorting/src/main.ts
new file mode 100644
index 0000000000..e111ac50c6
--- /dev/null
+++ b/examples/lit/sorting/src/main.ts
@@ -0,0 +1,195 @@
+import { customElement } from 'lit/decorators.js'
+import { html, LitElement } from 'lit'
+import { repeat } from 'lit/directives/repeat.js'
+import { state } from 'lit/decorators/state.js'
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  SortingFn,
+  type SortingState,
+  TableController,
+} from '@tanstack/lit-table'
+
+import { makeData, Person } from './makeData'
+
+const sortStatusFn: SortingFn<Person> = (rowA, rowB, _columnId) => {
+  const statusA = rowA.original.status
+  const statusB = rowB.original.status
+  const statusOrder = ['single', 'complicated', 'relationship']
+  return statusOrder.indexOf(statusA) - statusOrder.indexOf(statusB)
+}
+
+const columns: ColumnDef<Person>[] = [
+  {
+    accessorKey: 'firstName',
+    cell: info => info.getValue(),
+    //this column will sort in ascending order by default since it is a string column
+  },
+  {
+    accessorFn: row => row.lastName,
+    id: 'lastName',
+    cell: info => info.getValue(),
+    header: () => html`<span>Last Name</span>`,
+    sortUndefined: 'last', //force undefined values to the end
+    sortDescFirst: false, //first sort order will be ascending (nullable values can mess up auto detection of sort order)
+  },
+  {
+    accessorKey: 'age',
+    header: () => 'Age',
+    //this column will sort in descending order by default since it is a number column
+  },
+  {
+    accessorKey: 'visits',
+    header: () => html`<span>Visits</span>`,
+    sortUndefined: 'last', //force undefined values to the end
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    sortingFn: sortStatusFn, //use our custom sorting function for this enum column
+  },
+  {
+    accessorKey: 'progress',
+    header: 'Profile Progress',
+    // enableSorting: false, //disable sorting for this column
+  },
+  {
+    accessorKey: 'rank',
+    header: 'Rank',
+    invertSorting: true, //invert the sorting order (golf score-like where smaller is better)
+  },
+  {
+    accessorKey: 'createdAt',
+    header: 'Created At',
+    // sortingFn: 'datetime' //make sure table knows this is a datetime column (usually can detect if no null values)
+  },
+]
+
+const data: Person[] = makeData(1000)
+
+@customElement('lit-table-example')
+class LitTableExample extends LitElement {
+  @state()
+  private _sorting: SortingState = []
+
+  private tableController = new TableController<Person>(this)
+
+  protected render() {
+    const table = this.tableController.table({
+      columns,
+      data,
+      state: {
+        sorting: this._sorting,
+      },
+      onSortingChange: updaterOrValue => {
+        if (typeof updaterOrValue === 'function') {
+          this._sorting = updaterOrValue(this._sorting)
+        } else {
+          this._sorting = updaterOrValue
+        }
+      },
+      getSortedRowModel: getSortedRowModel(),
+      getCoreRowModel: getCoreRowModel(),
+    })
+
+    return html`
+      <table>
+        <thead>
+          ${repeat(
+            table.getHeaderGroups(),
+            headerGroup => headerGroup.id,
+            headerGroup => html`
+              <tr>
+                ${headerGroup.headers.map(
+                  header => html`
+                    <th colspan="${header.colSpan}">
+                      ${header.isPlaceholder
+                        ? null
+                        : html`<div
+                            title=${header.column.getCanSort()
+                              ? header.column.getNextSortingOrder() === 'asc'
+                                ? 'Sort ascending'
+                                : header.column.getNextSortingOrder() === 'desc'
+                                  ? 'Sort descending'
+                                  : 'Clear sort'
+                              : undefined}
+                            @click="${header.column.getToggleSortingHandler()}"
+                            style="cursor: ${header.column.getCanSort()
+                              ? 'pointer'
+                              : 'not-allowed'}"
+                          >
+                            ${flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                            ${{ asc: ' 🔼', desc: ' 🔽' }[
+                              header.column.getIsSorted() as string
+                            ] ?? null}
+                          </div>`}
+                    </th>
+                  `
+                )}
+              </tr>
+            `
+          )}
+        </thead>
+        <tbody>
+          ${table
+            .getRowModel()
+            .rows.slice(0, 10)
+            .map(
+              row => html`
+                <tr>
+                  ${row
+                    .getVisibleCells()
+                    .map(
+                      cell => html`
+                        <td>
+                          ${flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext()
+                          )}
+                        </td>
+                      `
+                    )}
+                </tr>
+              `
+            )}
+        </tbody>
+      </table>
+      <pre>${JSON.stringify(this._sorting, null, 2)}</pre>
+      <style>
+        * {
+          font-family: sans-serif;
+          font-size: 14px;
+          box-sizing: border-box;
+        }
+
+        table {
+          border: 1px solid lightgray;
+          border-collapse: collapse;
+        }
+
+        tbody {
+          border-bottom: 1px solid lightgray;
+        }
+
+        th {
+          border-bottom: 1px solid lightgray;
+          border-right: 1px solid lightgray;
+          padding: 2px 4px;
+        }
+
+        tfoot {
+          color: gray;
+        }
+
+        tfoot th {
+          font-weight: normal;
+        }
+      </style>
+    `
+  }
+}
diff --git a/examples/lit/sorting/src/makeData.ts b/examples/lit/sorting/src/makeData.ts
new file mode 100644
index 0000000000..d6c0639b22
--- /dev/null
+++ b/examples/lit/sorting/src/makeData.ts
@@ -0,0 +1,52 @@
+import { faker } from '@faker-js/faker'
+
+export type Person = {
+  firstName: string
+  lastName: string | undefined
+  age: number
+  visits: number | undefined
+  progress: number
+  status: 'relationship' | 'complicated' | 'single'
+  rank: number
+  createdAt: Date
+  subRows?: Person[]
+}
+
+const range = (len: number) => {
+  const arr: number[] = []
+  for (let i = 0; i < len; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+const newPerson = (): Person => {
+  return {
+    firstName: faker.person.firstName(),
+    lastName: Math.random() < 0.1 ? undefined : faker.person.lastName(),
+    age: faker.number.int(40),
+    visits: Math.random() < 0.1 ? undefined : faker.number.int(1000),
+    progress: faker.number.int(100),
+    createdAt: faker.date.anytime(),
+    status: faker.helpers.shuffle<Person['status']>([
+      'relationship',
+      'complicated',
+      'single',
+    ])[0]!,
+    rank: faker.number.int(100),
+  }
+}
+
+export function makeData(...lens: number[]) {
+  const makeDataLevel = (depth = 0): Person[] => {
+    const len = lens[depth]!
+    return range(len).map((_d): Person => {
+      return {
+        ...newPerson(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }
+    })
+  }
+
+  return makeDataLevel()
+}
diff --git a/examples/lit/sorting/tsconfig.json b/examples/lit/sorting/tsconfig.json
new file mode 100644
index 0000000000..56517d3a72
--- /dev/null
+++ b/examples/lit/sorting/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "useDefineForClassFields": false,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/lit/sorting/vite.config.js b/examples/lit/sorting/vite.config.js
new file mode 100644
index 0000000000..fa3b238ac6
--- /dev/null
+++ b/examples/lit/sorting/vite.config.js
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import rollupReplace from '@rollup/plugin-replace'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    rollupReplace({
+      preventAssignment: true,
+      values: {
+        __DEV__: JSON.stringify(true),
+        'process.env.NODE_ENV': JSON.stringify('development'),
+      },
+    }),
+  ],
+})
diff --git a/packages/lit-table/package.json b/packages/lit-table/package.json
new file mode 100644
index 0000000000..a374bde0ba
--- /dev/null
+++ b/packages/lit-table/package.json
@@ -0,0 +1,60 @@
+{
+  "name": "@tanstack/lit-table",
+  "version": "8.17.0",
+  "description": "Headless UI for building powerful tables & datagrids for Lit.",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/table.git",
+    "directory": "packages/lit-table"
+  },
+  "homepage": "https://tanstack.com/table",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "lit",
+    "table",
+    "lit-table",
+    "datagrid"
+  ],
+  "type": "commonjs",
+  "module": "build/lib/index.esm.js",
+  "main": "build/lib/index.js",
+  "types": "build/lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/lib/index.d.ts",
+      "import": "./build/lib/index.mjs",
+      "default": "./build/lib/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=12"
+  },
+  "files": [
+    "build/lib/*",
+    "build/umd/*",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rimraf ./build",
+    "test:types": "tsc --noEmit",
+    "build": "pnpm build:rollup && pnpm build:types",
+    "build:rollup": "rollup --config rollup.config.mjs",
+    "build:types": "tsc --emitDeclarationOnly"
+  },
+  "dependencies": {
+    "@tanstack/table-core": "workspace:*"
+  },
+  "devDependencies": {
+    "lit": "^3.1.3"
+  },
+  "peerDependencies": {
+    "lit": "^3.1.3"
+  }
+}
diff --git a/packages/lit-table/rollup.config.mjs b/packages/lit-table/rollup.config.mjs
new file mode 100644
index 0000000000..328da31311
--- /dev/null
+++ b/packages/lit-table/rollup.config.mjs
@@ -0,0 +1,17 @@
+// @ts-check
+
+import { defineConfig } from 'rollup'
+import { buildConfigs } from '../../scripts/getRollupConfig.js'
+
+export default defineConfig(
+  buildConfigs({
+    name: 'lit-table',
+    jsName: 'LitTable',
+    outputFile: 'index',
+    entryFile: 'src/index.ts',
+    external: ['lit', '@tanstack/table-core'],
+    globals: {
+      lit: 'Lit',
+    },
+  })
+)
diff --git a/packages/lit-table/src/index.ts b/packages/lit-table/src/index.ts
new file mode 100755
index 0000000000..1237d6553b
--- /dev/null
+++ b/packages/lit-table/src/index.ts
@@ -0,0 +1,69 @@
+import {
+  createTable,
+  RowData,
+  Table,
+  TableOptions,
+  TableOptionsResolved,
+  TableState,
+} from '@tanstack/table-core'
+import { ReactiveController, ReactiveControllerHost, TemplateResult } from 'lit'
+
+export * from '@tanstack/table-core'
+
+export function flexRender<TProps>(
+  Comp: ((props: TProps) => string) | string | TemplateResult | undefined,
+  props: TProps
+): TemplateResult | string | null {
+  if (!Comp) return null
+
+  if (typeof Comp === 'function') {
+    return Comp(props)
+  }
+
+  return Comp
+}
+
+export class TableController<TData extends RowData>
+  implements ReactiveController
+{
+  host: ReactiveControllerHost
+
+  private tableInstance: Table<TData> | null = null
+
+  private _tableState: TableState | null = null
+
+  constructor(host: ReactiveControllerHost) {
+    ;(this.host = host).addController(this)
+  }
+
+  public table(options: TableOptions<TData>) {
+    if (!this.tableInstance) {
+      const resolvedOptions: TableOptionsResolved<TData> = {
+        state: {},
+        onStateChange: () => {}, // noop
+        renderFallbackValue: null,
+        ...options,
+      }
+
+      this.tableInstance = createTable(resolvedOptions)
+      this._tableState = {
+        ...this.tableInstance.initialState,
+        ...options.state,
+      }
+    }
+
+    this.tableInstance.setOptions(prev => ({
+      ...prev,
+      state: { ...this._tableState, ...options.state },
+      onStateChange: (updater: any) => {
+        this._tableState = updater(this._tableState)
+        this.host.requestUpdate()
+        options.onStateChange?.(updater)
+      },
+    }))
+
+    return this.tableInstance
+  }
+
+  hostDisconnected() {}
+}
diff --git a/packages/lit-table/tsconfig.json b/packages/lit-table/tsconfig.json
new file mode 100644
index 0000000000..062f8964b3
--- /dev/null
+++ b/packages/lit-table/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "rootDir": "./src",
+    "outDir": "./build/lib",
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
+  },
+  "include": ["src"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c6c4503930..97fc140b6b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -103,28 +103,28 @@ importers:
     dependencies:
       '@angular/animations':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)
+        version: 17.3.1(@angular/core@17.3.1)
       '@angular/common':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)(rxjs@7.8.1)
+        version: 17.3.1(@angular/core@17.3.1)(rxjs@7.8.1)
       '@angular/compiler':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)
+        version: 17.3.1(@angular/core@17.3.1)
       '@angular/core':
         specifier: ^17.3.1
         version: 17.3.1(rxjs@7.8.1)(zone.js@0.14.4)
       '@angular/forms':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/common@17.3.6)(@angular/core@17.3.1)(@angular/platform-browser@17.3.6)(rxjs@7.8.1)
+        version: 17.3.1(@angular/common@17.3.1)(@angular/core@17.3.1)(@angular/platform-browser@17.3.1)(rxjs@7.8.1)
       '@angular/platform-browser':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/animations@17.3.6)(@angular/common@17.3.6)(@angular/core@17.3.1)
+        version: 17.3.1(@angular/animations@17.3.1)(@angular/common@17.3.1)(@angular/core@17.3.1)
       '@angular/platform-browser-dynamic':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/common@17.3.6)(@angular/compiler@17.3.6)(@angular/core@17.3.1)(@angular/platform-browser@17.3.6)
+        version: 17.3.1(@angular/common@17.3.1)(@angular/compiler@17.3.1)(@angular/core@17.3.1)(@angular/platform-browser@17.3.1)
       '@angular/router':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/common@17.3.6)(@angular/core@17.3.1)(@angular/platform-browser@17.3.6)(rxjs@7.8.1)
+        version: 17.3.1(@angular/common@17.3.1)(@angular/core@17.3.1)(@angular/platform-browser@17.3.1)(rxjs@7.8.1)
       '@tanstack/angular-table':
         specifier: ^8.17.3
         version: link:../../../packages/angular-table
@@ -137,13 +137,13 @@ importers:
     devDependencies:
       '@angular-devkit/build-angular':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/compiler-cli@17.3.6)(@types/node@20.12.7)(karma@6.4.3)(typescript@5.4.5)
+        version: 17.3.1(@angular/compiler-cli@17.3.1)(@types/node@20.12.7)(karma@6.4.3)(typescript@5.4.5)
       '@angular/cli':
         specifier: ^17.3.1
-        version: 17.3.6
+        version: 17.3.1
       '@angular/compiler-cli':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/compiler@17.3.6)(typescript@5.4.5)
+        version: 17.3.1(@angular/compiler@17.3.1)(typescript@5.4.5)
       '@types/jasmine':
         specifier: ~5.1.4
         version: 5.1.4
@@ -176,25 +176,25 @@ importers:
     dependencies:
       '@angular/animations':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)
+        version: 17.3.1(@angular/core@17.3.1)
       '@angular/common':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)(rxjs@7.8.1)
+        version: 17.3.1(@angular/core@17.3.1)(rxjs@7.8.1)
       '@angular/compiler':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)
+        version: 17.3.1(@angular/core@17.3.1)
       '@angular/core':
         specifier: ^17.3.1
         version: 17.3.1(rxjs@7.8.1)(zone.js@0.14.4)
       '@angular/forms':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/common@17.3.6)(@angular/core@17.3.1)(@angular/platform-browser@17.3.6)(rxjs@7.8.1)
+        version: 17.3.1(@angular/common@17.3.1)(@angular/core@17.3.1)(@angular/platform-browser@17.3.1)(rxjs@7.8.1)
       '@angular/platform-browser':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/animations@17.3.6)(@angular/common@17.3.6)(@angular/core@17.3.1)
+        version: 17.3.1(@angular/animations@17.3.1)(@angular/common@17.3.1)(@angular/core@17.3.1)
       '@angular/platform-browser-dynamic':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/common@17.3.6)(@angular/compiler@17.3.6)(@angular/core@17.3.1)(@angular/platform-browser@17.3.6)
+        version: 17.3.1(@angular/common@17.3.1)(@angular/compiler@17.3.1)(@angular/core@17.3.1)(@angular/platform-browser@17.3.1)
       '@tanstack/angular-table':
         specifier: ^8.17.3
         version: link:../../../packages/angular-table
@@ -207,13 +207,13 @@ importers:
     devDependencies:
       '@angular-devkit/build-angular':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/compiler-cli@17.3.6)(@types/node@20.12.7)(karma@6.4.3)(typescript@5.4.5)
+        version: 17.3.1(@angular/compiler-cli@17.3.1)(@types/node@20.12.7)(karma@6.4.3)(typescript@5.4.5)
       '@angular/cli':
         specifier: ^17.3.1
-        version: 17.3.6
+        version: 17.3.1
       '@angular/compiler-cli':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/compiler@17.3.6)(typescript@5.4.5)
+        version: 17.3.1(@angular/compiler@17.3.1)(typescript@5.4.5)
       '@types/jasmine':
         specifier: ~5.1.4
         version: 5.1.4
@@ -246,25 +246,25 @@ importers:
     dependencies:
       '@angular/animations':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)
+        version: 17.3.1(@angular/core@17.3.1)
       '@angular/common':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)(rxjs@7.8.1)
+        version: 17.3.1(@angular/core@17.3.1)(rxjs@7.8.1)
       '@angular/compiler':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)
+        version: 17.3.1(@angular/core@17.3.1)
       '@angular/core':
         specifier: ^17.3.1
         version: 17.3.1(rxjs@7.8.1)(zone.js@0.14.4)
       '@angular/forms':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/common@17.3.6)(@angular/core@17.3.1)(@angular/platform-browser@17.3.6)(rxjs@7.8.1)
+        version: 17.3.1(@angular/common@17.3.1)(@angular/core@17.3.1)(@angular/platform-browser@17.3.1)(rxjs@7.8.1)
       '@angular/platform-browser':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/animations@17.3.6)(@angular/common@17.3.6)(@angular/core@17.3.1)
+        version: 17.3.1(@angular/animations@17.3.1)(@angular/common@17.3.1)(@angular/core@17.3.1)
       '@angular/platform-browser-dynamic':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/common@17.3.6)(@angular/compiler@17.3.6)(@angular/core@17.3.1)(@angular/platform-browser@17.3.6)
+        version: 17.3.1(@angular/common@17.3.1)(@angular/compiler@17.3.1)(@angular/core@17.3.1)(@angular/platform-browser@17.3.1)
       '@faker-js/faker':
         specifier: ^8.4.1
         version: 8.4.1
@@ -280,13 +280,13 @@ importers:
     devDependencies:
       '@angular-devkit/build-angular':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/compiler-cli@17.3.6)(@types/node@20.12.7)(karma@6.4.3)(typescript@5.4.5)
+        version: 17.3.1(@angular/compiler-cli@17.3.1)(@types/node@20.12.7)(karma@6.4.3)(typescript@5.4.5)
       '@angular/cli':
         specifier: ^17.3.1
-        version: 17.3.6
+        version: 17.3.1
       '@angular/compiler-cli':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/compiler@17.3.6)(typescript@5.4.5)
+        version: 17.3.1(@angular/compiler@17.3.1)(typescript@5.4.5)
       '@types/jasmine':
         specifier: ~5.1.4
         version: 5.1.4
@@ -319,25 +319,25 @@ importers:
     dependencies:
       '@angular/animations':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)
+        version: 17.3.1(@angular/core@17.3.1)
       '@angular/common':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)(rxjs@7.8.1)
+        version: 17.3.1(@angular/core@17.3.1)(rxjs@7.8.1)
       '@angular/compiler':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)
+        version: 17.3.1(@angular/core@17.3.1)
       '@angular/core':
         specifier: ^17.3.1
         version: 17.3.1(rxjs@7.8.1)(zone.js@0.14.4)
       '@angular/forms':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/common@17.3.6)(@angular/core@17.3.1)(@angular/platform-browser@17.3.6)(rxjs@7.8.1)
+        version: 17.3.1(@angular/common@17.3.1)(@angular/core@17.3.1)(@angular/platform-browser@17.3.1)(rxjs@7.8.1)
       '@angular/platform-browser':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/animations@17.3.6)(@angular/common@17.3.6)(@angular/core@17.3.1)
+        version: 17.3.1(@angular/animations@17.3.1)(@angular/common@17.3.1)(@angular/core@17.3.1)
       '@angular/platform-browser-dynamic':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/common@17.3.6)(@angular/compiler@17.3.6)(@angular/core@17.3.1)(@angular/platform-browser@17.3.6)
+        version: 17.3.1(@angular/common@17.3.1)(@angular/compiler@17.3.1)(@angular/core@17.3.1)(@angular/platform-browser@17.3.1)
       '@faker-js/faker':
         specifier: ^8.4.1
         version: 8.4.1
@@ -353,13 +353,13 @@ importers:
     devDependencies:
       '@angular-devkit/build-angular':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/compiler-cli@17.3.6)(@types/node@20.12.7)(karma@6.4.3)(typescript@5.4.5)
+        version: 17.3.1(@angular/compiler-cli@17.3.1)(@types/node@20.12.7)(karma@6.4.3)(typescript@5.4.5)
       '@angular/cli':
         specifier: ^17.3.1
-        version: 17.3.6
+        version: 17.3.1
       '@angular/compiler-cli':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/compiler@17.3.6)(typescript@5.4.5)
+        version: 17.3.1(@angular/compiler@17.3.1)(typescript@5.4.5)
       '@types/jasmine':
         specifier: ~5.1.4
         version: 5.1.4
@@ -392,25 +392,25 @@ importers:
     dependencies:
       '@angular/animations':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)
+        version: 17.3.1(@angular/core@17.3.1)
       '@angular/common':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)(rxjs@7.8.1)
+        version: 17.3.1(@angular/core@17.3.1)(rxjs@7.8.1)
       '@angular/compiler':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)
+        version: 17.3.1(@angular/core@17.3.1)
       '@angular/core':
         specifier: ^17.3.1
         version: 17.3.1(rxjs@7.8.1)(zone.js@0.14.4)
       '@angular/forms':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/common@17.3.6)(@angular/core@17.3.1)(@angular/platform-browser@17.3.6)(rxjs@7.8.1)
+        version: 17.3.1(@angular/common@17.3.1)(@angular/core@17.3.1)(@angular/platform-browser@17.3.1)(rxjs@7.8.1)
       '@angular/platform-browser':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/animations@17.3.6)(@angular/common@17.3.6)(@angular/core@17.3.1)
+        version: 17.3.1(@angular/animations@17.3.1)(@angular/common@17.3.1)(@angular/core@17.3.1)
       '@angular/platform-browser-dynamic':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/common@17.3.6)(@angular/compiler@17.3.6)(@angular/core@17.3.1)(@angular/platform-browser@17.3.6)
+        version: 17.3.1(@angular/common@17.3.1)(@angular/compiler@17.3.1)(@angular/core@17.3.1)(@angular/platform-browser@17.3.1)
       '@tanstack/angular-table':
         specifier: ^8.17.3
         version: link:../../../packages/angular-table
@@ -423,13 +423,13 @@ importers:
     devDependencies:
       '@angular-devkit/build-angular':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/compiler-cli@17.3.6)(@types/node@20.12.7)(karma@6.4.3)(typescript@5.4.5)
+        version: 17.3.1(@angular/compiler-cli@17.3.1)(@types/node@20.12.7)(karma@6.4.3)(typescript@5.4.5)
       '@angular/cli':
         specifier: ^17.3.1
-        version: 17.3.6
+        version: 17.3.1
       '@angular/compiler-cli':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/compiler@17.3.6)(typescript@5.4.5)
+        version: 17.3.1(@angular/compiler@17.3.1)(typescript@5.4.5)
       '@types/jasmine':
         specifier: ~5.1.4
         version: 5.1.4
@@ -462,25 +462,25 @@ importers:
     dependencies:
       '@angular/animations':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)
+        version: 17.3.1(@angular/core@17.3.1)
       '@angular/common':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)(rxjs@7.8.1)
+        version: 17.3.1(@angular/core@17.3.1)(rxjs@7.8.1)
       '@angular/compiler':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)
+        version: 17.3.1(@angular/core@17.3.1)
       '@angular/core':
         specifier: ^17.3.1
         version: 17.3.1(rxjs@7.8.1)(zone.js@0.14.4)
       '@angular/forms':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/common@17.3.6)(@angular/core@17.3.1)(@angular/platform-browser@17.3.6)(rxjs@7.8.1)
+        version: 17.3.1(@angular/common@17.3.1)(@angular/core@17.3.1)(@angular/platform-browser@17.3.1)(rxjs@7.8.1)
       '@angular/platform-browser':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/animations@17.3.6)(@angular/common@17.3.6)(@angular/core@17.3.1)
+        version: 17.3.1(@angular/animations@17.3.1)(@angular/common@17.3.1)(@angular/core@17.3.1)
       '@angular/platform-browser-dynamic':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/common@17.3.6)(@angular/compiler@17.3.6)(@angular/core@17.3.1)(@angular/platform-browser@17.3.6)
+        version: 17.3.1(@angular/common@17.3.1)(@angular/compiler@17.3.1)(@angular/core@17.3.1)(@angular/platform-browser@17.3.1)
       '@faker-js/faker':
         specifier: ^8.4.1
         version: 8.4.1
@@ -499,13 +499,13 @@ importers:
     devDependencies:
       '@angular-devkit/build-angular':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/compiler-cli@17.3.6)(@types/node@20.12.7)(karma@6.4.3)(typescript@5.4.5)
+        version: 17.3.1(@angular/compiler-cli@17.3.1)(@types/node@20.12.7)(karma@6.4.3)(typescript@5.4.5)
       '@angular/cli':
         specifier: ^17.3.1
-        version: 17.3.6
+        version: 17.3.1
       '@angular/compiler-cli':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/compiler@17.3.6)(typescript@5.4.5)
+        version: 17.3.1(@angular/compiler@17.3.1)(typescript@5.4.5)
       '@types/jasmine':
         specifier: ~5.1.4
         version: 5.1.4
@@ -535,25 +535,25 @@ importers:
     dependencies:
       '@angular/animations':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)
+        version: 17.3.1(@angular/core@17.3.1)
       '@angular/common':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)(rxjs@7.8.1)
+        version: 17.3.1(@angular/core@17.3.1)(rxjs@7.8.1)
       '@angular/compiler':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)
+        version: 17.3.1(@angular/core@17.3.1)
       '@angular/core':
         specifier: ^17.3.1
         version: 17.3.1(rxjs@7.8.1)(zone.js@0.14.4)
       '@angular/forms':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/common@17.3.6)(@angular/core@17.3.1)(@angular/platform-browser@17.3.6)(rxjs@7.8.1)
+        version: 17.3.1(@angular/common@17.3.1)(@angular/core@17.3.1)(@angular/platform-browser@17.3.1)(rxjs@7.8.1)
       '@angular/platform-browser':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/animations@17.3.6)(@angular/common@17.3.6)(@angular/core@17.3.1)
+        version: 17.3.1(@angular/animations@17.3.1)(@angular/common@17.3.1)(@angular/core@17.3.1)
       '@angular/platform-browser-dynamic':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/common@17.3.6)(@angular/compiler@17.3.6)(@angular/core@17.3.1)(@angular/platform-browser@17.3.6)
+        version: 17.3.1(@angular/common@17.3.1)(@angular/compiler@17.3.1)(@angular/core@17.3.1)(@angular/platform-browser@17.3.1)
       '@faker-js/faker':
         specifier: ^8.4.1
         version: 8.4.1
@@ -569,13 +569,13 @@ importers:
     devDependencies:
       '@angular-devkit/build-angular':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/compiler-cli@17.3.6)(@types/node@20.12.7)(karma@6.4.3)(typescript@5.4.5)
+        version: 17.3.1(@angular/compiler-cli@17.3.1)(@types/node@20.12.7)(karma@6.4.3)(typescript@5.4.5)
       '@angular/cli':
         specifier: ^17.3.1
-        version: 17.3.6
+        version: 17.3.1
       '@angular/compiler-cli':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/compiler@17.3.6)(typescript@5.4.5)
+        version: 17.3.1(@angular/compiler@17.3.1)(typescript@5.4.5)
       '@types/jasmine':
         specifier: ~5.1.4
         version: 5.1.4
@@ -608,25 +608,25 @@ importers:
     dependencies:
       '@angular/animations':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)
+        version: 17.3.1(@angular/core@17.3.1)
       '@angular/common':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)(rxjs@7.8.1)
+        version: 17.3.1(@angular/core@17.3.1)(rxjs@7.8.1)
       '@angular/compiler':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)
+        version: 17.3.1(@angular/core@17.3.1)
       '@angular/core':
         specifier: ^17.3.1
         version: 17.3.1(rxjs@7.8.1)(zone.js@0.14.4)
       '@angular/forms':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/common@17.3.6)(@angular/core@17.3.1)(@angular/platform-browser@17.3.6)(rxjs@7.8.1)
+        version: 17.3.1(@angular/common@17.3.1)(@angular/core@17.3.1)(@angular/platform-browser@17.3.1)(rxjs@7.8.1)
       '@angular/platform-browser':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/animations@17.3.6)(@angular/common@17.3.6)(@angular/core@17.3.1)
+        version: 17.3.1(@angular/animations@17.3.1)(@angular/common@17.3.1)(@angular/core@17.3.1)
       '@angular/platform-browser-dynamic':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/common@17.3.6)(@angular/compiler@17.3.6)(@angular/core@17.3.1)(@angular/platform-browser@17.3.6)
+        version: 17.3.1(@angular/common@17.3.1)(@angular/compiler@17.3.1)(@angular/core@17.3.1)(@angular/platform-browser@17.3.1)
       '@faker-js/faker':
         specifier: ^8.4.1
         version: 8.4.1
@@ -645,13 +645,13 @@ importers:
     devDependencies:
       '@angular-devkit/build-angular':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/compiler-cli@17.3.6)(@types/node@20.12.7)(karma@6.4.3)(typescript@5.4.5)
+        version: 17.3.1(@angular/compiler-cli@17.3.1)(@types/node@20.12.7)(karma@6.4.3)(typescript@5.4.5)
       '@angular/cli':
         specifier: ^17.3.1
-        version: 17.3.6
+        version: 17.3.1
       '@angular/compiler-cli':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/compiler@17.3.6)(typescript@5.4.5)
+        version: 17.3.1(@angular/compiler@17.3.1)(typescript@5.4.5)
       '@types/jasmine':
         specifier: ~5.1.4
         version: 5.1.4
@@ -681,22 +681,22 @@ importers:
     dependencies:
       '@angular/animations':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)
+        version: 17.3.1(@angular/core@17.3.1)
       '@angular/common':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)(rxjs@7.8.1)
+        version: 17.3.1(@angular/core@17.3.1)(rxjs@7.8.1)
       '@angular/compiler':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/core@17.3.1)
+        version: 17.3.1(@angular/core@17.3.1)
       '@angular/core':
         specifier: ^17.3.1
         version: 17.3.1(rxjs@7.8.1)(zone.js@0.14.4)
       '@angular/platform-browser':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/animations@17.3.6)(@angular/common@17.3.6)(@angular/core@17.3.1)
+        version: 17.3.1(@angular/animations@17.3.1)(@angular/common@17.3.1)(@angular/core@17.3.1)
       '@angular/platform-browser-dynamic':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/common@17.3.6)(@angular/compiler@17.3.6)(@angular/core@17.3.1)(@angular/platform-browser@17.3.6)
+        version: 17.3.1(@angular/common@17.3.1)(@angular/compiler@17.3.1)(@angular/core@17.3.1)(@angular/platform-browser@17.3.1)
       '@faker-js/faker':
         specifier: ^8.4.1
         version: 8.4.1
@@ -712,13 +712,13 @@ importers:
     devDependencies:
       '@angular-devkit/build-angular':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/compiler-cli@17.3.6)(@types/node@20.12.7)(karma@6.4.3)(typescript@5.4.5)
+        version: 17.3.1(@angular/compiler-cli@17.3.1)(@types/node@20.12.7)(karma@6.4.3)(typescript@5.4.5)
       '@angular/cli':
         specifier: ^17.3.1
-        version: 17.3.6
+        version: 17.3.1
       '@angular/compiler-cli':
         specifier: ^17.3.1
-        version: 17.3.6(@angular/compiler@17.3.6)(typescript@5.4.5)
+        version: 17.3.1(@angular/compiler@17.3.1)(typescript@5.4.5)
       '@types/jasmine':
         specifier: ~5.1.4
         version: 5.1.4
@@ -747,6 +747,125 @@ importers:
         specifier: 5.4.5
         version: 5.4.5
 
+  examples/lit/basic:
+    dependencies:
+      '@tanstack/lit-table':
+        specifier: ^8.17.0
+        version: link:../../../packages/lit-table
+      '@twind/core':
+        specifier: ^1.1.3
+        version: 1.1.3(typescript@5.4.5)
+      '@twind/preset-autoprefix':
+        specifier: ^1.0.7
+        version: 1.0.7(@twind/core@1.1.3)(typescript@5.4.5)
+      '@twind/preset-tailwind':
+        specifier: ^1.1.4
+        version: 1.1.4(@twind/core@1.1.3)(typescript@5.4.5)
+      '@twind/with-web-components':
+        specifier: ^1.1.3
+        version: 1.1.3(@twind/core@1.1.3)(typescript@5.4.5)
+      lit:
+        specifier: ^3.1.3
+        version: 3.1.3
+    devDependencies:
+      '@rollup/plugin-replace':
+        specifier: ^5.0.5
+        version: 5.0.5(rollup@4.16.4)
+      typescript:
+        specifier: 5.4.5
+        version: 5.4.5
+      vite:
+        specifier: ^5.2.10
+        version: 5.2.10(@types/node@20.12.7)
+
+  examples/lit/column-sizing:
+    dependencies:
+      '@faker-js/faker':
+        specifier: ^8.4.1
+        version: 8.4.1
+      '@tanstack/lit-table':
+        specifier: ^8.17.0
+        version: link:../../../packages/lit-table
+      lit:
+        specifier: ^3.1.3
+        version: 3.1.3
+    devDependencies:
+      '@rollup/plugin-replace':
+        specifier: ^5.0.5
+        version: 5.0.5(rollup@4.16.4)
+      typescript:
+        specifier: 5.4.5
+        version: 5.4.5
+      vite:
+        specifier: ^5.2.10
+        version: 5.2.10(@types/node@20.12.7)
+
+  examples/lit/filters:
+    dependencies:
+      '@faker-js/faker':
+        specifier: ^8.4.1
+        version: 8.4.1
+      '@tanstack/lit-table':
+        specifier: ^8.17.0
+        version: link:../../../packages/lit-table
+      lit:
+        specifier: ^3.1.3
+        version: 3.1.3
+    devDependencies:
+      '@rollup/plugin-replace':
+        specifier: ^5.0.5
+        version: 5.0.5(rollup@4.16.4)
+      typescript:
+        specifier: 5.4.5
+        version: 5.4.5
+      vite:
+        specifier: ^5.2.10
+        version: 5.2.10(@types/node@20.12.7)
+
+  examples/lit/row-selection:
+    dependencies:
+      '@faker-js/faker':
+        specifier: ^8.4.1
+        version: 8.4.1
+      '@tanstack/lit-table':
+        specifier: ^8.17.0
+        version: link:../../../packages/lit-table
+      lit:
+        specifier: ^3.1.3
+        version: 3.1.3
+    devDependencies:
+      '@rollup/plugin-replace':
+        specifier: ^5.0.5
+        version: 5.0.5(rollup@4.16.4)
+      typescript:
+        specifier: 5.4.5
+        version: 5.4.5
+      vite:
+        specifier: ^5.2.10
+        version: 5.2.10(@types/node@20.12.7)
+
+  examples/lit/sorting:
+    dependencies:
+      '@faker-js/faker':
+        specifier: ^8.4.1
+        version: 8.4.1
+      '@tanstack/lit-table':
+        specifier: ^8.17.0
+        version: link:../../../packages/lit-table
+      lit:
+        specifier: ^3.1.3
+        version: 3.1.3
+    devDependencies:
+      '@rollup/plugin-replace':
+        specifier: ^5.0.5
+        version: 5.0.5(rollup@4.16.4)
+      typescript:
+        specifier: 5.4.5
+        version: 5.4.5
+      vite:
+        specifier: ^5.2.10
+        version: 5.2.10(@types/node@20.12.7)
+
   examples/qwik/basic:
     dependencies:
       '@tanstack/qwik-table':
@@ -755,7 +874,7 @@ importers:
     devDependencies:
       '@builder.io/qwik':
         specifier: ^1.5.2
-        version: 1.5.2(@types/node@20.12.7)(undici@6.11.1)
+        version: 1.5.2(@types/node@20.12.7)(undici@6.10.1)
       serve:
         specifier: ^14.2.3
         version: 14.2.3
@@ -777,7 +896,7 @@ importers:
     devDependencies:
       '@builder.io/qwik':
         specifier: ^1.5.2
-        version: 1.5.2(@types/node@20.12.7)(undici@6.11.1)
+        version: 1.5.2(@types/node@20.12.7)(undici@6.10.1)
       '@faker-js/faker':
         specifier: ^8.4.1
         version: 8.4.1
@@ -799,7 +918,7 @@ importers:
     devDependencies:
       '@builder.io/qwik':
         specifier: ^1.5.2
-        version: 1.5.2(@types/node@20.12.7)(undici@6.11.1)
+        version: 1.5.2(@types/node@20.12.7)(undici@6.10.1)
       '@faker-js/faker':
         specifier: ^8.4.1
         version: 8.4.1
@@ -821,7 +940,7 @@ importers:
     devDependencies:
       '@builder.io/qwik':
         specifier: ^1.5.2
-        version: 1.5.2(@types/node@20.12.7)(undici@6.11.1)
+        version: 1.5.2(@types/node@20.12.7)(undici@6.10.1)
       '@faker-js/faker':
         specifier: ^8.4.1
         version: 8.4.1
@@ -2563,10 +2682,20 @@ importers:
     devDependencies:
       '@angular/core':
         specifier: ^17.3.1
-        version: 17.3.1(rxjs@7.8.1)(zone.js@0.14.4)
+        version: 17.3.1(rxjs@7.8.1)(zone.js@0.14.5)
       ng-packagr:
         specifier: ^17.3.0
-        version: 17.3.0(@angular/compiler-cli@17.3.6)(tslib@2.6.2)(typescript@5.4.5)
+        version: 17.3.0(@angular/compiler-cli@17.3.8)(tslib@2.6.2)(typescript@5.4.5)
+
+  packages/lit-table:
+    dependencies:
+      '@tanstack/table-core':
+        specifier: workspace:*
+        version: link:../table-core
+    devDependencies:
+      lit:
+        specifier: ^3.1.3
+        version: 3.1.3
 
   packages/match-sorter-utils:
     dependencies:
@@ -2582,7 +2711,7 @@ importers:
     devDependencies:
       '@builder.io/qwik':
         specifier: ^1.5.2
-        version: 1.5.2(@types/node@20.12.7)(undici@6.11.1)
+        version: 1.5.2(@types/node@20.12.7)(undici@6.10.1)
 
   packages/react-table:
     dependencies:
@@ -2662,18 +2791,18 @@ packages:
       '@jridgewell/trace-mapping': 0.3.25
     dev: true
 
-  /@angular-devkit/architect@0.1703.6:
-    resolution: {integrity: sha512-Ck501FD/QuOjeKVFs7hU92w8+Ffetv0d5Sq09XY2/uygo5c/thMzp9nkevaIWBxUSeU5RqYZizDrhFVgYzbbOw==}
+  /@angular-devkit/architect@0.1703.1:
+    resolution: {integrity: sha512-vkfvURv7O+3fHMTE9K+yUEiFS0v4JNYKsDP0LE1ChH5Ocy0bJXGcH2Cyz2W8qdJGDG/tKe41VzvOLpu88Xv3zQ==}
     engines: {node: ^18.13.0 || >=20.9.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
     dependencies:
-      '@angular-devkit/core': 17.3.6
+      '@angular-devkit/core': 17.3.1
       rxjs: 7.8.1
     transitivePeerDependencies:
       - chokidar
     dev: true
 
-  /@angular-devkit/build-angular@17.3.6(@angular/compiler-cli@17.3.6)(@types/node@20.12.7)(karma@6.4.3)(typescript@5.4.5):
-    resolution: {integrity: sha512-K4CEZvhQZUUOpmXPVoI1YBM8BARbIlqE6FZRxakmnr+YOtVTYE5s+Dr1wgja8hZIohNz6L7j167G9Aut7oPU/w==}
+  /@angular-devkit/build-angular@17.3.1(@angular/compiler-cli@17.3.1)(@types/node@20.12.7)(karma@6.4.3)(typescript@5.4.5):
+    resolution: {integrity: sha512-e+hZvLVH5AvHCFbVtKRd5oJeFsEmjg7kK1V6hsVxH4YE2f2x399TSr+AGxwV+R3jnjZ67ujIeXXd0Uuf1RwcSg==}
     engines: {node: ^18.13.0 || >=20.9.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
     peerDependencies:
       '@angular/compiler-cli': ^17.0.0
@@ -2714,10 +2843,10 @@ packages:
         optional: true
     dependencies:
       '@ampproject/remapping': 2.3.0
-      '@angular-devkit/architect': 0.1703.6
-      '@angular-devkit/build-webpack': 0.1703.6(webpack-dev-server@4.15.1)(webpack@5.90.3)
-      '@angular-devkit/core': 17.3.6
-      '@angular/compiler-cli': 17.3.6(@angular/compiler@17.3.6)(typescript@5.4.5)
+      '@angular-devkit/architect': 0.1703.1
+      '@angular-devkit/build-webpack': 0.1703.1(webpack-dev-server@4.15.1)(webpack@5.90.3)
+      '@angular-devkit/core': 17.3.1
+      '@angular/compiler-cli': 17.3.1(@angular/compiler@17.3.1)(typescript@5.4.5)
       '@babel/core': 7.24.0
       '@babel/generator': 7.23.6
       '@babel/helper-annotate-as-pure': 7.22.5
@@ -2728,8 +2857,8 @@ packages:
       '@babel/preset-env': 7.24.0(@babel/core@7.24.0)
       '@babel/runtime': 7.24.0
       '@discoveryjs/json-ext': 0.5.7
-      '@ngtools/webpack': 17.3.6(@angular/compiler-cli@17.3.6)(typescript@5.4.5)(webpack@5.90.3)
-      '@vitejs/plugin-basic-ssl': 1.1.0(vite@5.1.7)
+      '@ngtools/webpack': 17.3.1(@angular/compiler-cli@17.3.1)(typescript@5.4.5)(webpack@5.90.3)
+      '@vitejs/plugin-basic-ssl': 1.1.0(vite@5.1.5)
       ansi-colors: 4.1.3
       autoprefixer: 10.4.18(postcss@8.4.35)
       babel-loader: 9.1.3(@babel/core@7.24.0)(webpack@5.90.3)
@@ -2771,11 +2900,11 @@ packages:
       tree-kill: 1.2.2
       tslib: 2.6.2
       typescript: 5.4.5
-      undici: 6.11.1
-      vite: 5.1.7(@types/node@20.12.7)(less@4.2.0)(sass@1.71.1)(terser@5.29.1)
+      undici: 6.7.1
+      vite: 5.1.5(@types/node@20.12.7)(less@4.2.0)(sass@1.71.1)(terser@5.29.1)
       watchpack: 2.4.0
       webpack: 5.90.3(esbuild@0.20.2)
-      webpack-dev-middleware: 6.1.2(webpack@5.90.3)
+      webpack-dev-middleware: 6.1.1(webpack@5.90.3)
       webpack-dev-server: 4.15.1(webpack@5.90.3)
       webpack-merge: 5.10.0
       webpack-subresource-integrity: 5.1.0(webpack@5.90.3)
@@ -2801,14 +2930,14 @@ packages:
       - webpack-cli
     dev: true
 
-  /@angular-devkit/build-webpack@0.1703.6(webpack-dev-server@4.15.1)(webpack@5.90.3):
-    resolution: {integrity: sha512-pJu0et2SiF0kfXenHSTtAART0omzbWpLgBfeUo4hBh4uwX5IaT+mRpYpr8gCXMq+qsjoQp3HobSU3lPDeBn+bg==}
+  /@angular-devkit/build-webpack@0.1703.1(webpack-dev-server@4.15.1)(webpack@5.90.3):
+    resolution: {integrity: sha512-nVUzewX8RCzaEPQZ1JQpE42wpsYchKQwfXUSCkoUsuCMB2c6zuEz0Jt94nzJg3UjSEEV4ZqCH8v5MDOvB49Rlw==}
     engines: {node: ^18.13.0 || >=20.9.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
     peerDependencies:
       webpack: ^5.30.0
       webpack-dev-server: ^4.0.0
     dependencies:
-      '@angular-devkit/architect': 0.1703.6
+      '@angular-devkit/architect': 0.1703.1
       rxjs: 7.8.1
       webpack: 5.90.3(esbuild@0.20.2)
       webpack-dev-server: 4.15.1(webpack@5.90.3)
@@ -2816,8 +2945,8 @@ packages:
       - chokidar
     dev: true
 
-  /@angular-devkit/core@17.3.6:
-    resolution: {integrity: sha512-FVbkT9dEwHEvjnxr4mvMNSMg2bCFoGoP4X68xXU9dhLEUpC05opLvfbaR3Qh543eCJ5AstosBFVzB/krfIkOvA==}
+  /@angular-devkit/core@17.3.1:
+    resolution: {integrity: sha512-EP7zwqBEaOPuBJwzKmh2abfgNFITGX178BOyTG6zTymeMzEbrvy2OdeQXSslkJ/RGLCpx60GT+0CFW7wGlQR6Q==}
     engines: {node: ^18.13.0 || >=20.9.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
     peerDependencies:
       chokidar: ^3.5.2
@@ -2833,11 +2962,11 @@ packages:
       source-map: 0.7.4
     dev: true
 
-  /@angular-devkit/schematics@17.3.6:
-    resolution: {integrity: sha512-2G1YuPInd8znG7uUgKOS7z72Aku50lTzB/2csWkWPJLAFkh7vKC8QZ40x8S1nC9npVYPhI5CRLX/HVpBh9CyxA==}
+  /@angular-devkit/schematics@17.3.1:
+    resolution: {integrity: sha512-c3tp5zC5zp6XpK9w8wJf3d4Dyw9BNbmg/VEoXtePGivp4hzks6zuMAFknNRwdK7roOlH0HyM5No4WUZHBFpOmw==}
     engines: {node: ^18.13.0 || >=20.9.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
     dependencies:
-      '@angular-devkit/core': 17.3.6
+      '@angular-devkit/core': 17.3.1
       jsonc-parser: 3.2.1
       magic-string: 0.30.8
       ora: 5.4.1
@@ -2846,25 +2975,25 @@ packages:
       - chokidar
     dev: true
 
-  /@angular/animations@17.3.6(@angular/core@17.3.1):
-    resolution: {integrity: sha512-ev99cnmc1S/SXYz9OwOyZQyHXHiUf+ZwQFpjYBRPoyKqZV4sOYMlyBbfjBO/GgCVrsGfMvBsCI6PtY3yquuabA==}
+  /@angular/animations@17.3.1(@angular/core@17.3.1):
+    resolution: {integrity: sha512-2TZ0M5J0IizhHpb404DeqArlv8Ki9BFz5ZUuET2uFROpKW8IMDCht8fSrn/DKHpjB9lvzPUhNFaRxNWEY6klnA==}
     engines: {node: ^18.13.0 || >=20.9.0}
     peerDependencies:
-      '@angular/core': 17.3.6
+      '@angular/core': 17.3.1
     dependencies:
       '@angular/core': 17.3.1(rxjs@7.8.1)(zone.js@0.14.4)
       tslib: 2.6.2
     dev: false
 
-  /@angular/cli@17.3.6:
-    resolution: {integrity: sha512-poKaRPeI+hFqX+AxIaEriaIggFVcC3XqlT9E1/uBC2rfHirE1n5F9Z7xqEDtMHduKwLbNXhQIPoKIKya8+Hnew==}
+  /@angular/cli@17.3.1:
+    resolution: {integrity: sha512-IVnnbRi53BZvZ3LE0PCfFefoB2uHlO1sHtilZf/xCpdV4E1Mkz0/hHln5CRHwAXErdSiY57VoMsF5tffxAfaBQ==}
     engines: {node: ^18.13.0 || >=20.9.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
     hasBin: true
     dependencies:
-      '@angular-devkit/architect': 0.1703.6
-      '@angular-devkit/core': 17.3.6
-      '@angular-devkit/schematics': 17.3.6
-      '@schematics/angular': 17.3.6
+      '@angular-devkit/architect': 0.1703.1
+      '@angular-devkit/core': 17.3.1
+      '@angular-devkit/schematics': 17.3.1
+      '@schematics/angular': 17.3.1
       '@yarnpkg/lockfile': 1.1.0
       ansi-colors: 4.1.3
       ini: 4.1.2
@@ -2885,11 +3014,11 @@ packages:
       - supports-color
     dev: true
 
-  /@angular/common@17.3.6(@angular/core@17.3.1)(rxjs@7.8.1):
-    resolution: {integrity: sha512-ufviCFzQQKWcwc2j3Zi8bHbwkvqh4QU6GDH0u0usOee8xd8KrjgcYl3vD0r1/yxlDsd53Wg9kNRvz/fY+5qQoQ==}
+  /@angular/common@17.3.1(@angular/core@17.3.1)(rxjs@7.8.1):
+    resolution: {integrity: sha512-HyUTJ4RxhE3bOmFRV6Fv2y01ixbrUb8Hd4MxPm8REbNMGKsWCfXhR3FfxFL18Sc03SAF+o0Md0wwekjFKTNKfQ==}
     engines: {node: ^18.13.0 || >=20.9.0}
     peerDependencies:
-      '@angular/core': 17.3.6
+      '@angular/core': 17.3.1
       rxjs: ^6.5.3 || ^7.4.0
     dependencies:
       '@angular/core': 17.3.1(rxjs@7.8.1)(zone.js@0.14.4)
@@ -2897,15 +3026,37 @@ packages:
       tslib: 2.6.2
     dev: false
 
-  /@angular/compiler-cli@17.3.6(@angular/compiler@17.3.6)(typescript@5.4.5):
-    resolution: {integrity: sha512-LaoUkY6uzcNocIEHJBvexvuU0a333IRQaG3Sj5IXhM1t864wTsfycn6yWJcQ7PhklB8BtNqiMbUQuEFtkxT8pg==}
+  /@angular/compiler-cli@17.3.1(@angular/compiler@17.3.1)(typescript@5.4.5):
+    resolution: {integrity: sha512-xLV9KU+zOpe57/2rQ59ku21EaStNpLSlR9+qkDYf8JR09fB+W9vY3UYbpi5RjHxAFIZBM5D9SFQjjll8rch26g==}
+    engines: {node: ^18.13.0 || >=20.9.0}
+    hasBin: true
+    peerDependencies:
+      '@angular/compiler': 17.3.1
+      typescript: '>=5.2 <5.5'
+    dependencies:
+      '@angular/compiler': 17.3.1(@angular/core@17.3.1)
+      '@babel/core': 7.23.9
+      '@jridgewell/sourcemap-codec': 1.4.15
+      chokidar: 3.6.0
+      convert-source-map: 1.9.0
+      reflect-metadata: 0.2.2
+      semver: 7.6.0
+      tslib: 2.6.2
+      typescript: 5.4.5
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@angular/compiler-cli@17.3.8(@angular/compiler@17.3.8)(typescript@5.4.5):
+    resolution: {integrity: sha512-/TsbCmk7QJUEEZnRdNzi6znsPfoDJuy6vHDqcwWVEcw7y6W7DjirSFmtT9u1QwrV67KM6kOh22+RvPdGM8sPmg==}
     engines: {node: ^18.13.0 || >=20.9.0}
     hasBin: true
     peerDependencies:
-      '@angular/compiler': 17.3.6
+      '@angular/compiler': 17.3.8
       typescript: '>=5.2 <5.5'
     dependencies:
-      '@angular/compiler': 17.3.6(@angular/core@17.3.1)
+      '@angular/compiler': 17.3.8(@angular/core@17.3.1)
       '@babel/core': 7.23.9
       '@jridgewell/sourcemap-codec': 1.4.15
       chokidar: 3.6.0
@@ -2919,11 +3070,11 @@ packages:
       - supports-color
     dev: true
 
-  /@angular/compiler@17.3.6(@angular/core@17.3.1):
-    resolution: {integrity: sha512-ybx9O76RGv4J97IThiSVvvWukuGcuXu50KsBDPUd874BFT3ml0OcRGhXoMh/isz7EQipiiGgsA51cJVTLES5Zw==}
+  /@angular/compiler@17.3.1(@angular/core@17.3.1):
+    resolution: {integrity: sha512-8qqlWPGZEyD2FY5losOW3Aocro+lFysPDzsf0LHgQUM6Ub1b+pq4jUOjH6w0vzaxG3TfxkgzOQ9aNdWtSV67Rg==}
     engines: {node: ^18.13.0 || >=20.9.0}
     peerDependencies:
-      '@angular/core': 17.3.6
+      '@angular/core': 17.3.1
     peerDependenciesMeta:
       '@angular/core':
         optional: true
@@ -2931,6 +3082,19 @@ packages:
       '@angular/core': 17.3.1(rxjs@7.8.1)(zone.js@0.14.4)
       tslib: 2.6.2
 
+  /@angular/compiler@17.3.8(@angular/core@17.3.1):
+    resolution: {integrity: sha512-7vZSh2Oa95lZdRR4MhE0icvZ7JUuYY+NSo3eTSOMZSlH5I9rtwQoSFqfoGW+35rXCzGFLOhQmZBbXkxDPDs97Q==}
+    engines: {node: ^18.13.0 || >=20.9.0}
+    peerDependencies:
+      '@angular/core': 17.3.8
+    peerDependenciesMeta:
+      '@angular/core':
+        optional: true
+    dependencies:
+      '@angular/core': 17.3.1(rxjs@7.8.1)(zone.js@0.14.5)
+      tslib: 2.6.2
+    dev: true
+
   /@angular/core@17.3.1(rxjs@7.8.1)(zone.js@0.14.4):
     resolution: {integrity: sha512-Qf3/sgkXS1LHwOTtqAVYprySrn0YpPIZqerPc0tK+hyQfwAz5BQlpcBhbH8RWKlfCY8eO0cqo/j0+e8DQOgYfg==}
     engines: {node: ^18.13.0 || >=20.9.0}
@@ -2942,67 +3106,79 @@ packages:
       tslib: 2.6.2
       zone.js: 0.14.4
 
-  /@angular/forms@17.3.6(@angular/common@17.3.6)(@angular/core@17.3.1)(@angular/platform-browser@17.3.6)(rxjs@7.8.1):
-    resolution: {integrity: sha512-WXxWhwvgRfYLNP2dB4Qe83tavEh2LnS4H0uoiecWHXijW2R9z8304X1vEyS1EtQK7o/s8fCVDVDjeY+hxLnCLw==}
+  /@angular/core@17.3.1(rxjs@7.8.1)(zone.js@0.14.5):
+    resolution: {integrity: sha512-Qf3/sgkXS1LHwOTtqAVYprySrn0YpPIZqerPc0tK+hyQfwAz5BQlpcBhbH8RWKlfCY8eO0cqo/j0+e8DQOgYfg==}
     engines: {node: ^18.13.0 || >=20.9.0}
     peerDependencies:
-      '@angular/common': 17.3.6
-      '@angular/core': 17.3.6
-      '@angular/platform-browser': 17.3.6
       rxjs: ^6.5.3 || ^7.4.0
+      zone.js: ~0.14.0
     dependencies:
-      '@angular/common': 17.3.6(@angular/core@17.3.1)(rxjs@7.8.1)
+      rxjs: 7.8.1
+      tslib: 2.6.2
+      zone.js: 0.14.5
+    dev: true
+
+  /@angular/forms@17.3.1(@angular/common@17.3.1)(@angular/core@17.3.1)(@angular/platform-browser@17.3.1)(rxjs@7.8.1):
+    resolution: {integrity: sha512-HndsO90k67sFHzd+sII+rhAUksffBvquFuAUCc6QR9WVjILxVg2fY7oBidgS1gKNqu0mptPG0GvuORnaW/0gSg==}
+    engines: {node: ^18.13.0 || >=20.9.0}
+    peerDependencies:
+      '@angular/common': 17.3.1
+      '@angular/core': 17.3.1
+      '@angular/platform-browser': 17.3.1
+      rxjs: ^6.5.3 || ^7.4.0
+    dependencies:
+      '@angular/common': 17.3.1(@angular/core@17.3.1)(rxjs@7.8.1)
       '@angular/core': 17.3.1(rxjs@7.8.1)(zone.js@0.14.4)
-      '@angular/platform-browser': 17.3.6(@angular/animations@17.3.6)(@angular/common@17.3.6)(@angular/core@17.3.1)
+      '@angular/platform-browser': 17.3.1(@angular/animations@17.3.1)(@angular/common@17.3.1)(@angular/core@17.3.1)
       rxjs: 7.8.1
       tslib: 2.6.2
     dev: false
 
-  /@angular/platform-browser-dynamic@17.3.6(@angular/common@17.3.6)(@angular/compiler@17.3.6)(@angular/core@17.3.1)(@angular/platform-browser@17.3.6):
-    resolution: {integrity: sha512-dI+mgEROmSll042+XqkSsvkMQe6Et6L9BBiYYe7VbIFaRR9Dz5Pw2SeBLb+Ou+gWaxXc2Wc+13n442WEYWZ7Ew==}
+  /@angular/platform-browser-dynamic@17.3.1(@angular/common@17.3.1)(@angular/compiler@17.3.1)(@angular/core@17.3.1)(@angular/platform-browser@17.3.1):
+    resolution: {integrity: sha512-ACW/npNaDxUNQtEomjjv/KIBY8jHEinePff5qosnAxLE0IpA4qE9eDp36zG35xoJqrPJPYjXbZCBRqqrzM7U7Q==}
     engines: {node: ^18.13.0 || >=20.9.0}
     peerDependencies:
-      '@angular/common': 17.3.6
-      '@angular/compiler': 17.3.6
-      '@angular/core': 17.3.6
-      '@angular/platform-browser': 17.3.6
+      '@angular/common': 17.3.1
+      '@angular/compiler': 17.3.1
+      '@angular/core': 17.3.1
+      '@angular/platform-browser': 17.3.1
     dependencies:
-      '@angular/common': 17.3.6(@angular/core@17.3.1)(rxjs@7.8.1)
-      '@angular/compiler': 17.3.6(@angular/core@17.3.1)
+      '@angular/common': 17.3.1(@angular/core@17.3.1)(rxjs@7.8.1)
+      '@angular/compiler': 17.3.1(@angular/core@17.3.1)
       '@angular/core': 17.3.1(rxjs@7.8.1)(zone.js@0.14.4)
-      '@angular/platform-browser': 17.3.6(@angular/animations@17.3.6)(@angular/common@17.3.6)(@angular/core@17.3.1)
+      '@angular/platform-browser': 17.3.1(@angular/animations@17.3.1)(@angular/common@17.3.1)(@angular/core@17.3.1)
       tslib: 2.6.2
     dev: false
 
-  /@angular/platform-browser@17.3.6(@angular/animations@17.3.6)(@angular/common@17.3.6)(@angular/core@17.3.1):
-    resolution: {integrity: sha512-UikrgvMwtZIXp2pCP5AtkM7ibz2B5wBiGpnhhkYsqHKy9ndKVDA+3B5Z+/j9xeYYdsJAAtHl45zqILewyg+4iw==}
+  /@angular/platform-browser@17.3.1(@angular/animations@17.3.1)(@angular/common@17.3.1)(@angular/core@17.3.1):
+    resolution: {integrity: sha512-8ABAL8PElSGzkIparVwifsU0NSu0DdqnWYw9YvLhhZQ6lOuWbG+dTUo/DXzmWhA6ezQWJGNakEZPJJytFIIy+A==}
     engines: {node: ^18.13.0 || >=20.9.0}
     peerDependencies:
-      '@angular/animations': 17.3.6
-      '@angular/common': 17.3.6
-      '@angular/core': 17.3.6
+      '@angular/animations': 17.3.1
+      '@angular/common': 17.3.1
+      '@angular/core': 17.3.1
     peerDependenciesMeta:
       '@angular/animations':
         optional: true
     dependencies:
-      '@angular/animations': 17.3.6(@angular/core@17.3.1)
-      '@angular/common': 17.3.6(@angular/core@17.3.1)(rxjs@7.8.1)
+      '@angular/animations': 17.3.1(@angular/core@17.3.1)
+      '@angular/common': 17.3.1(@angular/core@17.3.1)(rxjs@7.8.1)
       '@angular/core': 17.3.1(rxjs@7.8.1)(zone.js@0.14.4)
       tslib: 2.6.2
     dev: false
 
-  /@angular/router@17.3.6(@angular/common@17.3.6)(@angular/core@17.3.1)(@angular/platform-browser@17.3.6)(rxjs@7.8.1):
-    resolution: {integrity: sha512-Gws3zukTlPO5lIGP0bmWBkmbRIRKvpPq6vs3BqQlbKsrfBh45SPvIRbx+BSv6WYUchQzfW7DFDXnQtiTEGGQNg==}
+  /@angular/router@17.3.1(@angular/common@17.3.1)(@angular/core@17.3.1)(@angular/platform-browser@17.3.1)(rxjs@7.8.1):
+    resolution: {integrity: sha512-H6H7lY9i5Ppu0SFwwpeWqJbCFw8cILOj8Rd1+AGoCN5m3ivPtjD2Ltz62PI2zZkqx+WhQdk19l61Wm3oRqg70A==}
     engines: {node: ^18.13.0 || >=20.9.0}
     peerDependencies:
-      '@angular/common': 17.3.6
-      '@angular/core': 17.3.6
-      '@angular/platform-browser': 17.3.6
+      '@angular/common': 17.3.1
+      '@angular/core': 17.3.1
+      '@angular/platform-browser': 17.3.1
       rxjs: ^6.5.3 || ^7.4.0
     dependencies:
-      '@angular/common': 17.3.6(@angular/core@17.3.1)(rxjs@7.8.1)
+      '@angular/common': 17.3.1(@angular/core@17.3.1)(rxjs@7.8.1)
       '@angular/core': 17.3.1(rxjs@7.8.1)(zone.js@0.14.4)
-      '@angular/platform-browser': 17.3.6(@angular/animations@17.3.6)(@angular/common@17.3.6)(@angular/core@17.3.1)
+      '@angular/platform-browser': 17.3.1(@angular/animations@17.3.1)(@angular/common@17.3.1)(@angular/core@17.3.1)
       rxjs: 7.8.1
       tslib: 2.6.2
     dev: false
@@ -3014,6 +3190,11 @@ packages:
       '@babel/highlight': 7.24.2
       picocolors: 1.0.0
 
+  /@babel/compat-data@7.24.1:
+    resolution: {integrity: sha512-Pc65opHDliVpRHuKfzI+gSA4zcgr65O4cl64fFJIWEEh8JoHIHh0Oez1Eo8Arz8zq/JhgKodQaxEwUPRtZylVA==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
   /@babel/compat-data@7.24.4:
     resolution: {integrity: sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==}
     engines: {node: '>=6.9.0'}
@@ -3159,31 +3340,13 @@ packages:
     resolution: {integrity: sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/compat-data': 7.24.4
+      '@babel/compat-data': 7.24.1
       '@babel/helper-validator-option': 7.23.5
       browserslist: 4.23.0
       lru-cache: 5.1.1
       semver: 6.3.1
     dev: true
 
-  /@babel/helper-create-class-features-plugin@7.24.1(@babel/core@7.24.0):
-    resolution: {integrity: sha512-1yJa9dX9g//V6fDebXoEfEsxkZHk3Hcbm+zLhyu6qVgYFLvmTALTeV+jNU9e5RnYtioBrGEOdoI2joMSNQ/+aA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.24.0
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-function-name': 7.23.0
-      '@babel/helper-member-expression-to-functions': 7.23.0
-      '@babel/helper-optimise-call-expression': 7.22.5
-      '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.0)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      semver: 6.3.1
-    dev: true
-
   /@babel/helper-create-class-features-plugin@7.24.1(@babel/core@7.24.3):
     resolution: {integrity: sha512-1yJa9dX9g//V6fDebXoEfEsxkZHk3Hcbm+zLhyu6qVgYFLvmTALTeV+jNU9e5RnYtioBrGEOdoI2joMSNQ/+aA==}
     engines: {node: '>=6.9.0'}
@@ -4858,7 +5021,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.24.0
-      '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.0)
+      '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.0)
       '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
@@ -4881,7 +5044,7 @@ packages:
     dependencies:
       '@babel/core': 7.24.0
       '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.0)
+      '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.0)
       '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.0)
     dev: true
@@ -5543,7 +5706,7 @@ packages:
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
-  /@builder.io/qwik@1.5.2(@types/node@20.12.7)(undici@6.11.1):
+  /@builder.io/qwik@1.5.2(@types/node@20.12.7)(undici@6.10.1):
     resolution: {integrity: sha512-dUz61FEhC7NjJx0xDnCz6+F6uSBZgJUeur9+EYekpP/BNe2pr4ZH5FORcEOLetJtmxezR6EwTU3GeDLl5159Jg==}
     engines: {node: '>=16.8.0 <18.0.0 || >=18.11'}
     hasBin: true
@@ -5551,7 +5714,7 @@ packages:
       undici: '*'
     dependencies:
       csstype: 3.1.3
-      undici: 6.11.1
+      undici: 6.10.1
       vite: 5.2.10(@types/node@20.12.7)
     transitivePeerDependencies:
       - '@types/node'
@@ -6531,6 +6694,14 @@ packages:
     resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}
     dev: true
 
+  /@lit-labs/ssr-dom-shim@1.2.0:
+    resolution: {integrity: sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g==}
+
+  /@lit/reactive-element@2.0.4:
+    resolution: {integrity: sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.2.0
+
   /@ljharb/through@2.3.13:
     resolution: {integrity: sha512-/gKJun8NNiWGZJkGzI/Ragc53cOdcLNdzjLaIa+GEjguQs0ulsurx8WN0jijdK9yPqDvziX995sMRLyLt1uZMQ==}
     engines: {node: '>= 0.4'}
@@ -6760,15 +6931,15 @@ packages:
       react-is: 18.2.0
     dev: false
 
-  /@ngtools/webpack@17.3.6(@angular/compiler-cli@17.3.6)(typescript@5.4.5)(webpack@5.90.3):
-    resolution: {integrity: sha512-equxbgh2DKzZtiFMoVf1KD4yJcH1q8lpqQ/GSPPQUvONcmHrr+yqdRUdaJ7oZCyCYmXF/nByBxtMKtJr6nKZVg==}
+  /@ngtools/webpack@17.3.1(@angular/compiler-cli@17.3.1)(typescript@5.4.5)(webpack@5.90.3):
+    resolution: {integrity: sha512-6qRYFN6DqogZK0ZFrSlhg1OsIWm3lL3m+/Ixoj6/MLLjDBrTtHqmI93vg6P1EKYTH4fWChL7jtv7iS/LSZubgw==}
     engines: {node: ^18.13.0 || >=20.9.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
     peerDependencies:
       '@angular/compiler-cli': ^17.0.0
       typescript: '>=5.2 <5.5'
       webpack: ^5.54.0
     dependencies:
-      '@angular/compiler-cli': 17.3.6(@angular/compiler@17.3.6)(typescript@5.4.5)
+      '@angular/compiler-cli': 17.3.1(@angular/compiler@17.3.1)(typescript@5.4.5)
       typescript: 5.4.5
       webpack: 5.90.3(esbuild@0.20.2)
     dev: true
@@ -6819,7 +6990,7 @@ packages:
     resolution: {integrity: sha512-OrcNPXdpSl9UX7qPVRWbmWMCSXrcDa2M9DvrbOTj7ao1S4PlqVFYv9/yLKMkrJKZ/V5A/kDBC690or307i26Og==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
-      agent-base: 7.1.1
+      agent-base: 7.1.0
       http-proxy-agent: 7.0.2
       https-proxy-agent: 7.0.4
       lru-cache: 10.2.0
@@ -6828,18 +6999,18 @@ packages:
       - supports-color
     dev: true
 
-  /@npmcli/fs@3.1.0:
-    resolution: {integrity: sha512-7kZUAaLscfgbwBQRbvdMYaZOWyMEcPTH/tJjnyAWJ/dvvs9Ef+CERx/qJb9GExJpl1qipaDGn7KqHnFGGixd0w==}
+  /@npmcli/fs@3.1.1:
+    resolution: {integrity: sha512-q9CRWjpHCMIh5sVyefoD1cA7PkvILqCZsnSOEUUivORLjxCO/Irmue2DprETiNgEqktDBZaM1Bi+jrarx1XdCg==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
       semver: 7.6.0
     dev: true
 
-  /@npmcli/git@5.0.6:
-    resolution: {integrity: sha512-4x/182sKXmQkf0EtXxT26GEsaOATpD7WVtza5hrYivWZeo6QefC6xq9KAXrnjtFKBZ4rZwR7aX/zClYYXgtwLw==}
+  /@npmcli/git@5.0.7:
+    resolution: {integrity: sha512-WaOVvto604d5IpdCRV2KjQu8PzkfE96d50CQGKgywXh2GxXmDeUO5EWcBC4V57uFyrNqx83+MewuJh3WTR3xPA==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
-      '@npmcli/promise-spawn': 7.0.1
+      '@npmcli/promise-spawn': 7.0.2
       lru-cache: 10.2.0
       npm-pick-manifest: 9.0.0
       proc-log: 4.2.0
@@ -6856,7 +7027,7 @@ packages:
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     hasBin: true
     dependencies:
-      npm-bundled: 3.0.0
+      npm-bundled: 3.0.1
       npm-normalize-package-bin: 3.0.1
     dev: true
 
@@ -6869,19 +7040,19 @@ packages:
     resolution: {integrity: sha512-1aL4TuVrLS9sf8quCLerU3H9J4vtCtgu8VauYozrmEyU57i/EdKleCnsQ7vpnABIH6c9mnTxcH5sFkO3BlV8wQ==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
-      '@npmcli/git': 5.0.6
+      '@npmcli/git': 5.0.7
       glob: 10.3.10
-      hosted-git-info: 7.0.1
-      json-parse-even-better-errors: 3.0.1
-      normalize-package-data: 6.0.0
+      hosted-git-info: 7.0.2
+      json-parse-even-better-errors: 3.0.2
+      normalize-package-data: 6.0.1
       proc-log: 4.2.0
       semver: 7.6.0
     transitivePeerDependencies:
       - bluebird
     dev: true
 
-  /@npmcli/promise-spawn@7.0.1:
-    resolution: {integrity: sha512-P4KkF9jX3y+7yFUxgcUdDtLy+t4OlDGuEBLNs57AZsfSfg+uV6MLndqGpnl4831ggaEdXwR50XFoZP4VFtHolg==}
+  /@npmcli/promise-spawn@7.0.2:
+    resolution: {integrity: sha512-xhfYPXoV5Dy4UkY0D+v2KkwvnDfiA/8Mt3sWCGI/hM03NsYIH8ZaG6QzS9x7pje5vHZBZJ2v6VRFVTWACnqcmQ==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
       which: 4.0.0
@@ -6898,7 +7069,7 @@ packages:
     dependencies:
       '@npmcli/node-gyp': 3.0.0
       '@npmcli/package-json': 5.1.0
-      '@npmcli/promise-spawn': 7.0.1
+      '@npmcli/promise-spawn': 7.0.2
       node-gyp: 10.1.0
       which: 4.0.0
     transitivePeerDependencies:
@@ -7161,7 +7332,7 @@ packages:
         optional: true
     dependencies:
       '@rollup/pluginutils': 5.1.0(rollup@4.16.4)
-      magic-string: 0.30.8
+      magic-string: 0.30.10
       rollup: 4.16.4
     dev: true
 
@@ -7331,8 +7502,8 @@ packages:
     dev: true
     optional: true
 
-  /@rollup/wasm-node@4.17.1:
-    resolution: {integrity: sha512-07J72z5LBQtNSFAunXeCSNEj7D72kfbeySMrOb7h1cswxKEFUqYjJ2gGLKfMuH1X42SrJ0zKx/i1K/hRbIIjHQ==}
+  /@rollup/wasm-node@4.17.2:
+    resolution: {integrity: sha512-4F6C3XaUn02XY/GJMQTXncWrLyCkRHdRZe4OyWuQUprWKmU2u+esISOtCYdr3Bp9AqCIo/X3So2Ik7N9dNDwow==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
     dependencies:
@@ -7389,12 +7560,12 @@ packages:
       - '@types/node'
     dev: true
 
-  /@schematics/angular@17.3.6:
-    resolution: {integrity: sha512-jCNZdjHSVrI8TrrCnCoXC8GYvQRj7zh+SDdmm91Ve8dbikYNmBOKYLuPaCTsmojWx7ytv962yLlgKzpaa2bbfw==}
+  /@schematics/angular@17.3.1:
+    resolution: {integrity: sha512-B3TkpjDjZhxX+tUc2ySEHU33x82Da0sssq/EMqQ1PQBHeRMa0ecyCeExjFEs2y57ZuC+QeVTaUt+TW45lLSjQw==}
     engines: {node: ^18.13.0 || >=20.9.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
     dependencies:
-      '@angular-devkit/core': 17.3.6
-      '@angular-devkit/schematics': 17.3.6
+      '@angular-devkit/core': 17.3.1
+      '@angular-devkit/schematics': 17.3.1
       jsonc-parser: 3.2.1
     transitivePeerDependencies:
       - chokidar
@@ -7404,7 +7575,7 @@ packages:
     resolution: {integrity: sha512-eqV17lO3EIFqCWK3969Rz+J8MYrRZKw9IBHpSo6DEcEX2c+uzDFOgHE9f2MnyDpfs48LFO4hXmk9KhQ74JzU1g==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
-      '@sigstore/protobuf-specs': 0.3.1
+      '@sigstore/protobuf-specs': 0.3.2
     dev: true
 
   /@sigstore/core@1.1.0:
@@ -7412,29 +7583,31 @@ packages:
     engines: {node: ^16.14.0 || >=18.0.0}
     dev: true
 
-  /@sigstore/protobuf-specs@0.3.1:
-    resolution: {integrity: sha512-aIL8Z9NsMr3C64jyQzE0XlkEyBLpgEJJFDHLVVStkFV5Q3Il/r/YtY6NJWKQ4cy4AE7spP1IX5Jq7VCAxHHMfQ==}
+  /@sigstore/protobuf-specs@0.3.2:
+    resolution: {integrity: sha512-c6B0ehIWxMI8wiS/bj6rHMPqeFvngFV7cDU/MY+B16P9Z3Mp9k8L93eYZ7BYzSickzuqAQqAq0V956b3Ju6mLw==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dev: true
 
-  /@sigstore/sign@2.3.0:
-    resolution: {integrity: sha512-tsAyV6FC3R3pHmKS880IXcDJuiFJiKITO1jxR1qbplcsBkZLBmjrEw5GbC7ikD6f5RU1hr7WnmxB/2kKc1qUWQ==}
+  /@sigstore/sign@2.3.1:
+    resolution: {integrity: sha512-YZ71wKIOweC8ViUeZXboz0iPLqMkskxuoeN/D1CEpAyZvEepbX9oRMIoO6a/DxUqO1VEaqmcmmqzSiqtOsvSmw==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
       '@sigstore/bundle': 2.3.1
       '@sigstore/core': 1.1.0
-      '@sigstore/protobuf-specs': 0.3.1
-      make-fetch-happen: 13.0.0
+      '@sigstore/protobuf-specs': 0.3.2
+      make-fetch-happen: 13.0.1
+      proc-log: 4.2.0
+      promise-retry: 2.0.1
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@sigstore/tuf@2.3.2:
-    resolution: {integrity: sha512-mwbY1VrEGU4CO55t+Kl6I7WZzIl+ysSzEYdA1Nv/FTrl2bkeaPXo5PnWZAVfcY2zSdhOpsUTJW67/M2zHXGn5w==}
+  /@sigstore/tuf@2.3.3:
+    resolution: {integrity: sha512-agQhHNkIddXFslkudjV88vTXiAMEyUtso3at6ZHUNJ1agZb7Ze6VW/PddHipdWBu1t+8OWLW5X5yZOPiOnaWJQ==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
-      '@sigstore/protobuf-specs': 0.3.1
-      tuf-js: 2.2.0
+      '@sigstore/protobuf-specs': 0.3.2
+      tuf-js: 2.2.1
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -7445,7 +7618,7 @@ packages:
     dependencies:
       '@sigstore/bundle': 2.3.1
       '@sigstore/core': 1.1.0
-      '@sigstore/protobuf-specs': 0.3.1
+      '@sigstore/protobuf-specs': 0.3.2
     dev: true
 
   /@sinclair/typebox@0.27.8:
@@ -7703,14 +7876,70 @@ packages:
     engines: {node: ^16.14.0 || >=18.0.0}
     dev: true
 
-  /@tufjs/models@2.0.0:
-    resolution: {integrity: sha512-c8nj8BaOExmZKO2DXhDfegyhSGcG9E/mPN3U13L+/PsoWm1uaGiHHjxqSHQiasDBQwDA3aHuw9+9spYAP1qvvg==}
+  /@tufjs/models@2.0.1:
+    resolution: {integrity: sha512-92F7/SFyufn4DXsha9+QfKnN03JGqtMFMXgSHbZOo8JG59WkTni7UzAouNQDf7AuP9OAMxVOPQcqG3sB7w+kkg==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
       '@tufjs/canonical-json': 2.0.0
-      minimatch: 9.0.3
+      minimatch: 9.0.4
     dev: true
 
+  /@twind/core@1.1.3(typescript@5.4.5):
+    resolution: {integrity: sha512-/B/aNFerMb2IeyjSJy3SJxqVxhrT77gBDknLMiZqXIRr4vNJqiuhx7KqUSRzDCwUmyGuogkamz+aOLzN6MeSLw==}
+    engines: {node: '>=14.15.0'}
+    peerDependencies:
+      typescript: ^4.8.4
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      csstype: 3.1.3
+      typescript: 5.4.5
+    dev: false
+
+  /@twind/preset-autoprefix@1.0.7(@twind/core@1.1.3)(typescript@5.4.5):
+    resolution: {integrity: sha512-3wmHO0pG/CVxYBNZUV0tWcL7CP0wD5KpyWAQE/KOalWmOVBj+nH6j3v6Y3I3pRuMFaG5DC78qbYbhA1O11uG3w==}
+    engines: {node: '>=14.15.0'}
+    peerDependencies:
+      '@twind/core': ^1.1.0
+      typescript: ^4.8.4
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@twind/core': 1.1.3(typescript@5.4.5)
+      style-vendorizer: 2.2.3
+      typescript: 5.4.5
+    dev: false
+
+  /@twind/preset-tailwind@1.1.4(@twind/core@1.1.3)(typescript@5.4.5):
+    resolution: {integrity: sha512-zv85wrP/DW4AxgWrLfH7kyGn/KJF3K04FMLVl2AjoxZGYdCaoZDkL8ma3hzaKQ+WGgBFRubuB/Ku2Rtv/wjzVw==}
+    engines: {node: '>=14.15.0'}
+    peerDependencies:
+      '@twind/core': ^1.1.0
+      typescript: ^4.8.4
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@twind/core': 1.1.3(typescript@5.4.5)
+      typescript: 5.4.5
+    dev: false
+
+  /@twind/with-web-components@1.1.3(@twind/core@1.1.3)(typescript@5.4.5):
+    resolution: {integrity: sha512-pM2Ps58pkLQva2HsC/cm2y5kTIwojJ6896w4+kXIMCOhuoOfTeyNOkYvBdr8Cpkvm+vR+ggPITNdvpzAOXa+Dg==}
+    engines: {node: '>=14.15.0'}
+    peerDependencies:
+      '@twind/core': ^1.1.0
+      typescript: ^4.8.4
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@twind/core': 1.1.3(typescript@5.4.5)
+      typescript: 5.4.5
+    dev: false
+
   /@types/argparse@1.0.38:
     resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==}
     dev: true
@@ -7943,6 +8172,9 @@ packages:
       '@types/node': 20.12.7
     dev: true
 
+  /@types/trusted-types@2.0.7:
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   /@types/warning@3.0.3:
     resolution: {integrity: sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==}
     dev: false
@@ -7953,13 +8185,13 @@ packages:
       '@types/node': 20.12.7
     dev: true
 
-  /@vitejs/plugin-basic-ssl@1.1.0(vite@5.1.7):
+  /@vitejs/plugin-basic-ssl@1.1.0(vite@5.1.5):
     resolution: {integrity: sha512-wO4Dk/rm8u7RNhOf95ZzcEmC9rYOncYgvq4z3duaJrCgjN8BxAnDVyndanfcJZ0O6XZzHz6Q0hTimxTg8Y9g/A==}
     engines: {node: '>=14.6.0'}
     peerDependencies:
       vite: ^3.0.0 || ^4.0.0 || ^5.0.0
     dependencies:
-      vite: 5.1.7(@types/node@20.12.7)(less@4.2.0)(sass@1.71.1)(terser@5.29.1)
+      vite: 5.1.5(@types/node@20.12.7)(less@4.2.0)(sass@1.71.1)(terser@5.29.1)
     dev: true
 
   /@vitejs/plugin-react@4.2.1(vite@5.2.10):
@@ -8982,12 +9214,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /builtins@5.1.0:
-    resolution: {integrity: sha512-SW9lzGTLvWTP1AY8xeAMZimqDrIaSdLQUcVr9DMef51niJ022Ri87SwRRKYm4A6iHfkPaiVUu/Duw2Wc4J7kKg==}
-    dependencies:
-      semver: 7.6.0
-    dev: true
-
   /bytes-iec@3.1.1:
     resolution: {integrity: sha512-fey6+4jDK7TFtFg/klGSvNKJctyU7n2aQdnM+CO0ruLPbqqMOM8Tio0Pc+deqUeVKX1tL5DQep1zQ7+37aTAsA==}
     engines: {node: '>= 0.8'}
@@ -9008,11 +9234,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /cacache@18.0.2:
-    resolution: {integrity: sha512-r3NU8h/P+4lVUHfeRw1dtgQYar3DZMm4/cm2bZgOvrFC/su7budSOeqh52VJIC4U4iG1WWwV6vRW0znqBvxNuw==}
+  /cacache@18.0.3:
+    resolution: {integrity: sha512-qXCd4rh6I07cnDqh8V48/94Tc/WSfj+o3Gn6NZ0aZovS255bUx8O13uKxRFd2eWG0xgsco7+YItQNPaa5E85hg==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
-      '@npmcli/fs': 3.1.0
+      '@npmcli/fs': 3.1.1
       fs-minipass: 3.0.3
       glob: 10.3.10
       lru-cache: 10.2.0
@@ -9021,7 +9247,7 @@ packages:
       minipass-flush: 1.0.5
       minipass-pipeline: 1.2.4
       p-map: 4.0.0
-      ssri: 10.0.5
+      ssri: 10.0.6
       tar: 6.2.1
       unique-filename: 3.0.0
     dev: true
@@ -9905,8 +10131,8 @@ packages:
       - utf-8-validate
     dev: true
 
-  /enhanced-resolve@5.16.0:
-    resolution: {integrity: sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==}
+  /enhanced-resolve@5.16.1:
+    resolution: {integrity: sha512-4U5pNsuDl0EhuZpq46M5xPslstkviJuhrdobaRDBk2Jy2KO37FDAJl4lb2KlNabxT0m4MTK2UHNrsAcphE8nyw==}
     engines: {node: '>=10.13.0'}
     dependencies:
       graceful-fs: 4.2.11
@@ -10571,8 +10797,8 @@ packages:
       minipass: 7.0.4
     dev: true
 
-  /fs-monkey@1.0.5:
-    resolution: {integrity: sha512-8uMbBjrhzW76TYgEV27Y5E//W2f/lTFmx78P2w19FZSxarhI/798APGQyuGCwmkNxgwGRhrLfvWyLBvNtuOmew==}
+  /fs-monkey@1.0.6:
+    resolution: {integrity: sha512-b1FMfwetIKymC0eioW7mTywihSQE4oLzQn1dB6rZB5fx/3NpNEdAWeCSMB+60/AeT0TCXsxzAlcYVEFCTAksWg==}
     dev: true
 
   /fs.realpath@1.0.0:
@@ -10827,8 +11053,8 @@ packages:
       parse-passwd: 1.0.0
     dev: true
 
-  /hosted-git-info@7.0.1:
-    resolution: {integrity: sha512-+K84LB1DYwMHoHSgaOY/Jfhw3ucPmSET5v98Ke/HdNSw4a0UktWzyW1mjhjpuxxTqOOsfWT/7iVshHmVZ4IpOA==}
+  /hosted-git-info@7.0.2:
+    resolution: {integrity: sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
       lru-cache: 10.2.0
@@ -10949,7 +11175,7 @@ packages:
     resolution: {integrity: sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==}
     engines: {node: '>= 14'}
     dependencies:
-      agent-base: 7.1.1
+      agent-base: 7.1.0
       debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
@@ -10996,8 +11222,8 @@ packages:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: true
 
-  /ignore-walk@6.0.4:
-    resolution: {integrity: sha512-t7sv42WkwFkyKbivUCglsQW5YWMskWtbEf4MNKX5u/CCWHKSPzN4FtBQGsQZgCLbxOzpVlcbWVK5KB3auIOjSw==}
+  /ignore-walk@6.0.5:
+    resolution: {integrity: sha512-VuuG0wCnjhnylG1ABXT3dAuIpTNDs/G8jlpmwXY03fXoXy/8ZK8/T+hMzt8L4WnrLCJgdybqgPagnF/f97cg3A==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
       minimatch: 9.0.3
@@ -11016,8 +11242,8 @@ packages:
     dev: true
     optional: true
 
-  /immutable@4.3.5:
-    resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==}
+  /immutable@4.3.6:
+    resolution: {integrity: sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==}
     dev: true
 
   /import-fresh@3.3.0:
@@ -11531,8 +11757,8 @@ packages:
   /json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
-  /json-parse-even-better-errors@3.0.1:
-    resolution: {integrity: sha512-aatBvbL26wVUCLmbWdCpeu9iF5wOyWpagiKkInA+kfws3sWdBrTnsvN2CKcyCYyUrc7rebNBlK6+kteg7ksecg==}
+  /json-parse-even-better-errors@3.0.2:
+    resolution: {integrity: sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dev: true
 
@@ -11768,6 +11994,8 @@ packages:
     peerDependenciesMeta:
       webpack:
         optional: true
+      webpack-sources:
+        optional: true
     dependencies:
       webpack: 5.90.3(esbuild@0.20.2)
       webpack-sources: 3.2.3
@@ -11800,6 +12028,25 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dev: true
 
+  /lit-element@4.0.5:
+    resolution: {integrity: sha512-iTWskWZEtn9SyEf4aBG6rKT8GABZMrTWop1+jopsEOgEcugcXJGKuX5bEbkq9qfzY+XB4MAgCaSPwnNpdsNQ3Q==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.2.0
+      '@lit/reactive-element': 2.0.4
+      lit-html: 3.1.3
+
+  /lit-html@3.1.3:
+    resolution: {integrity: sha512-FwIbqDD8O/8lM4vUZ4KvQZjPPNx7V1VhT7vmRB8RBAO0AU6wuTVdoXiu2CivVjEGdugvcbPNBLtPE1y0ifplHA==}
+    dependencies:
+      '@types/trusted-types': 2.0.7
+
+  /lit@3.1.3:
+    resolution: {integrity: sha512-l4slfspEsnCcHVRTvaP7YnkTZEZggNFywLEIhQaGhYDczG+tu/vlgm/KaWIEjIp+ZyV20r2JnZctMb8LeLCG7Q==}
+    dependencies:
+      '@lit/reactive-element': 2.0.4
+      lit-element: 4.0.5
+      lit-html: 3.1.3
+
   /loader-runner@4.3.0:
     resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
     engines: {node: '>=6.11.5'}
@@ -11975,21 +12222,22 @@ packages:
       semver: 7.6.0
     dev: true
 
-  /make-fetch-happen@13.0.0:
-    resolution: {integrity: sha512-7ThobcL8brtGo9CavByQrQi+23aIfgYU++wg4B87AIS8Rb2ZBt/MEaDqzA00Xwv/jUjAjYkLHjVolYuTLKda2A==}
+  /make-fetch-happen@13.0.1:
+    resolution: {integrity: sha512-cKTUFc/rbKUd/9meOvgrpJ2WrNzymt6jfRDdwg5UCnVzv9dTpEj9JS5m3wtziXVCjluIXyL8pcaukYqezIzZQA==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
       '@npmcli/agent': 2.2.2
-      cacache: 18.0.2
+      cacache: 18.0.3
       http-cache-semantics: 4.1.1
       is-lambda: 1.0.1
       minipass: 7.0.4
-      minipass-fetch: 3.0.4
+      minipass-fetch: 3.0.5
       minipass-flush: 1.0.5
       minipass-pipeline: 1.2.4
       negotiator: 0.6.3
+      proc-log: 4.2.0
       promise-retry: 2.0.1
-      ssri: 10.0.5
+      ssri: 10.0.6
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -12024,7 +12272,7 @@ packages:
     resolution: {integrity: sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==}
     engines: {node: '>= 4.0.0'}
     dependencies:
-      fs-monkey: 1.0.5
+      fs-monkey: 1.0.6
     dev: true
 
   /meow@12.1.1:
@@ -12157,6 +12405,13 @@ packages:
       brace-expansion: 2.0.1
     dev: true
 
+  /minimatch@9.0.4:
+    resolution: {integrity: sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
   /minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
     dev: true
@@ -12168,8 +12423,8 @@ packages:
       minipass: 7.0.4
     dev: true
 
-  /minipass-fetch@3.0.4:
-    resolution: {integrity: sha512-jHAqnA728uUpIaFm7NWsCnqKT6UqZz7GcI/bDpPATuwYyKwJwW0remxSCxUlKiEty+eopHGa3oc8WxgQ1FFJqg==}
+  /minipass-fetch@3.0.5:
+    resolution: {integrity: sha512-2N8elDQAtSnFV0Dk7gt15KHsS0Fyz6CbYZ360h0WTYV1Ty46li3rAXVOQj1THMNLdmrD9Vt5pBPtWtVkpwGBqg==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
       minipass: 7.0.4
@@ -12334,7 +12589,7 @@ packages:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
     dev: true
 
-  /ng-packagr@17.3.0(@angular/compiler-cli@17.3.6)(tslib@2.6.2)(typescript@5.4.5):
+  /ng-packagr@17.3.0(@angular/compiler-cli@17.3.8)(tslib@2.6.2)(typescript@5.4.5):
     resolution: {integrity: sha512-kMSqxeDgv88SWCoapWNRRN1UdBgwu9/Pw/j7u2WFGmzrIWUFivNWBBSSL94kMxr2La+Z9wMwiL8EwKNvmCpg2A==}
     engines: {node: ^18.13.0 || >=20.9.0}
     hasBin: true
@@ -12347,14 +12602,14 @@ packages:
       tailwindcss:
         optional: true
     dependencies:
-      '@angular/compiler-cli': 17.3.6(@angular/compiler@17.3.6)(typescript@5.4.5)
+      '@angular/compiler-cli': 17.3.8(@angular/compiler@17.3.8)(typescript@5.4.5)
       '@rollup/plugin-json': 6.1.0(rollup@4.16.4)
       '@rollup/plugin-node-resolve': 15.2.3(rollup@4.16.4)
-      '@rollup/wasm-node': 4.17.1
+      '@rollup/wasm-node': 4.17.2
       ajv: 8.12.0
       ansi-colors: 4.1.3
       browserslist: 4.23.0
-      cacache: 18.0.2
+      cacache: 18.0.3
       chokidar: 3.6.0
       commander: 12.0.0
       convert-source-map: 2.0.0
@@ -12365,11 +12620,11 @@ packages:
       injection-js: 2.4.0
       jsonc-parser: 3.2.1
       less: 4.2.0
-      ora: 5.4.1
+      ora: 5.3.0
       piscina: 4.4.0
       postcss: 8.4.38
       rxjs: 7.8.1
-      sass: 1.75.0
+      sass: 1.77.1
       tslib: 2.6.2
       typescript: 5.4.5
     optionalDependencies:
@@ -12383,7 +12638,7 @@ packages:
     requiresBuild: true
     dependencies:
       node-addon-api: 3.2.1
-      node-gyp-build: 4.8.0
+      node-gyp-build: 4.8.1
     dev: true
     optional: true
 
@@ -12398,8 +12653,8 @@ packages:
     engines: {node: '>= 6.13.0'}
     dev: true
 
-  /node-gyp-build@4.8.0:
-    resolution: {integrity: sha512-u6fs2AEUljNho3EYTJNBfImO5QTo/J/1Etd+NVdCj7qWKUSN/bSLkZwhDv7I+w/MSC6qJ4cknepkAYykDdK8og==}
+  /node-gyp-build@4.8.1:
+    resolution: {integrity: sha512-OSs33Z9yWr148JZcbZd5WiAXhh/n9z8TxQcdMhIOlpN9AhWpLfvVFO73+m77bBABQMaY9XSvIa+qk0jlI7Gcaw==}
     hasBin: true
     requiresBuild: true
     dev: true
@@ -12414,8 +12669,8 @@ packages:
       exponential-backoff: 3.1.1
       glob: 10.3.10
       graceful-fs: 4.2.11
-      make-fetch-happen: 13.0.0
-      nopt: 7.2.0
+      make-fetch-happen: 13.0.1
+      nopt: 7.2.1
       proc-log: 3.0.0
       semver: 7.6.0
       tar: 6.2.1
@@ -12432,19 +12687,19 @@ packages:
     resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
     dev: true
 
-  /nopt@7.2.0:
-    resolution: {integrity: sha512-CVDtwCdhYIvnAzFoJ6NJ6dX3oga9/HyciQDnG1vQDjSLMeKLJ4A93ZqYKDrgYSr1FBY5/hMYC+2VCi24pgpkGA==}
+  /nopt@7.2.1:
+    resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     hasBin: true
     dependencies:
       abbrev: 2.0.0
     dev: true
 
-  /normalize-package-data@6.0.0:
-    resolution: {integrity: sha512-UL7ELRVxYBHBgYEtZCXjxuD5vPxnmvMGq0jp/dGPKKrN7tfsBh2IY7TlJ15WWwdjRWD3RJbnsygUurTK3xkPkg==}
+  /normalize-package-data@6.0.1:
+    resolution: {integrity: sha512-6rvCfeRW+OEZagAB4lMLSNuTNYZWLVtKccK79VSTf//yTY5VOCgcpH80O+bZK8Neps7pUnd5G+QlMg1yV/2iZQ==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
-      hosted-git-info: 7.0.1
+      hosted-git-info: 7.0.2
       is-core-module: 2.13.1
       semver: 7.6.0
       validate-npm-package-license: 3.0.4
@@ -12460,8 +12715,8 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /npm-bundled@3.0.0:
-    resolution: {integrity: sha512-Vq0eyEQy+elFpzsKjMss9kxqb9tG3YHg4dsyWuUENuzvSUWe1TCnW/vV9FkhvBk/brEDoDiVd+M1Btosa6ImdQ==}
+  /npm-bundled@3.0.1:
+    resolution: {integrity: sha512-+AvaheE/ww1JEwRHOrn4WHNzOxGtVp+adrg2AeZS/7KuxGUYFuBta98wYpfHBbJp6Tg6j1NKSEVHNcfZzJHQwQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
       npm-normalize-package-bin: 3.0.1
@@ -12483,17 +12738,17 @@ packages:
     resolution: {integrity: sha512-M7s1BD4NxdAvBKUPqqRW957Xwcl/4Zvo8Aj+ANrzvIPzGJZElrH7Z//rSaec2ORcND6FHHLnZeY8qgTpXDMFQQ==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
-      hosted-git-info: 7.0.1
+      hosted-git-info: 7.0.2
       proc-log: 3.0.0
       semver: 7.6.0
-      validate-npm-package-name: 5.0.0
+      validate-npm-package-name: 5.0.1
     dev: true
 
   /npm-packlist@8.0.2:
     resolution: {integrity: sha512-shYrPFIS/JLP4oQmAwDyk5HcyysKW8/JLTEA32S0Z5TzvpaeeX2yMFfoK1fjEBnCBvVyIB/Jj/GBFdm0wsgzbA==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
-      ignore-walk: 6.0.4
+      ignore-walk: 6.0.5
     dev: true
 
   /npm-pick-manifest@9.0.0:
@@ -12511,9 +12766,9 @@ packages:
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
       '@npmcli/redact': 1.1.0
-      make-fetch-happen: 13.0.0
+      make-fetch-happen: 13.0.1
       minipass: 7.0.4
-      minipass-fetch: 3.0.4
+      minipass-fetch: 3.0.5
       minipass-json-stream: 1.0.1
       minizlib: 2.1.2
       npm-package-arg: 11.0.1
@@ -12808,11 +13063,11 @@ packages:
     engines: {node: ^16.14.0 || >=18.0.0}
     hasBin: true
     dependencies:
-      '@npmcli/git': 5.0.6
+      '@npmcli/git': 5.0.7
       '@npmcli/installed-package-contents': 2.1.0
-      '@npmcli/promise-spawn': 7.0.1
+      '@npmcli/promise-spawn': 7.0.2
       '@npmcli/run-script': 7.0.4
-      cacache: 18.0.2
+      cacache: 18.0.3
       fs-minipass: 3.0.3
       minipass: 7.0.4
       npm-package-arg: 11.0.1
@@ -12821,10 +13076,10 @@ packages:
       npm-registry-fetch: 16.2.1
       proc-log: 3.0.0
       promise-retry: 2.0.1
-      read-package-json: 7.0.0
+      read-package-json: 7.0.1
       read-package-json-fast: 3.0.2
       sigstore: 2.3.0
-      ssri: 10.0.5
+      ssri: 10.0.6
       tar: 6.2.1
     transitivePeerDependencies:
       - bluebird
@@ -13432,17 +13687,17 @@ packages:
     resolution: {integrity: sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
-      json-parse-even-better-errors: 3.0.1
+      json-parse-even-better-errors: 3.0.2
       npm-normalize-package-bin: 3.0.1
     dev: true
 
-  /read-package-json@7.0.0:
-    resolution: {integrity: sha512-uL4Z10OKV4p6vbdvIXB+OzhInYtIozl/VxUBPgNkBuUi2DeRonnuspmaVAMcrkmfjKGNmRndyQAbE7/AmzGwFg==}
+  /read-package-json@7.0.1:
+    resolution: {integrity: sha512-8PcDiZ8DXUjLf687Ol4BR8Bpm2umR7vhoZOzNRt+uxD9GpBh/K+CAAALVIiYFknmvlmyg7hM7BSNUXPaCCqd0Q==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
       glob: 10.3.10
-      json-parse-even-better-errors: 3.0.1
-      normalize-package-data: 6.0.0
+      json-parse-even-better-errors: 3.0.2
+      normalize-package-data: 6.0.1
       npm-normalize-package-bin: 3.0.1
     dev: true
 
@@ -13830,17 +14085,17 @@ packages:
     hasBin: true
     dependencies:
       chokidar: 3.6.0
-      immutable: 4.3.5
+      immutable: 4.3.6
       source-map-js: 1.2.0
     dev: true
 
-  /sass@1.75.0:
-    resolution: {integrity: sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==}
+  /sass@1.77.1:
+    resolution: {integrity: sha512-OMEyfirt9XEfyvocduUIOlUSkWOXS/LAt6oblR/ISXCTukyavjex+zQNm51pPCOiFKY1QpWvEH1EeCkgyV3I6w==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:
       chokidar: 3.6.0
-      immutable: 4.3.5
+      immutable: 4.3.6
       source-map-js: 1.2.0
     dev: true
 
@@ -14174,9 +14429,9 @@ packages:
     dependencies:
       '@sigstore/bundle': 2.3.1
       '@sigstore/core': 1.1.0
-      '@sigstore/protobuf-specs': 0.3.1
-      '@sigstore/sign': 2.3.0
-      '@sigstore/tuf': 2.3.2
+      '@sigstore/protobuf-specs': 0.3.2
+      '@sigstore/sign': 2.3.1
+      '@sigstore/tuf': 2.3.3
       '@sigstore/verify': 1.2.0
     transitivePeerDependencies:
       - supports-color
@@ -14459,8 +14714,8 @@ packages:
     resolution: {integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==}
     dev: true
 
-  /ssri@10.0.5:
-    resolution: {integrity: sha512-bSf16tAFkGeRlUNDjXu8FzaMQt6g2HZJrun7mtMbIPOddxt3GLMSz5VWUWcqTJUPfLEaDIepGxv+bYQW49596A==}
+  /ssri@10.0.6:
+    resolution: {integrity: sha512-MGrFH9Z4NP9Iyhqn16sDtBpRRNJ0Y2hNa6D65h736fVSaPCHr4DM4sWUNvVaSuC+0OBGhwsrydQwmgfg5LncqQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
       minipass: 7.0.4
@@ -14627,6 +14882,10 @@ packages:
     resolution: {integrity: sha512-H2N9c26eXjzL/S/K+i/RHHcFanE74dptvvjM8iwzwbVcWY/zjBbgRqF3K0DY4+OD+uTTASTBvDoxPDaPN02D7g==}
     dev: true
 
+  /style-vendorizer@2.2.3:
+    resolution: {integrity: sha512-/VDRsWvQAgspVy9eATN3z6itKTuyg+jW1q6UoTCQCFRqPDw8bi3E1hXIKnGw5LvXS2AQPuJ7Af4auTLYeBOLEg==}
+    dev: false
+
   /stylis@4.2.0:
     resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
 
@@ -15071,13 +15330,13 @@ packages:
   /tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
 
-  /tuf-js@2.2.0:
-    resolution: {integrity: sha512-ZSDngmP1z6zw+FIkIBjvOp/II/mIub/O7Pp12j1WNsiCpg5R5wAc//i555bBQsE44O94btLt0xM/Zr2LQjwdCg==}
+  /tuf-js@2.2.1:
+    resolution: {integrity: sha512-GwIJau9XaA8nLVbUXsN3IlFi7WmQ48gBUrl3FTkkL/XLu/POhBzfmX9hd33FNMX1qAsfl6ozO1iMmW9NC8YniA==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
-      '@tufjs/models': 2.0.0
+      '@tufjs/models': 2.0.1
       debug: 4.3.4
-      make-fetch-happen: 13.0.0
+      make-fetch-happen: 13.0.1
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -15157,8 +15416,13 @@ packages:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
     dev: true
 
-  /undici@6.11.1:
-    resolution: {integrity: sha512-KyhzaLJnV1qa3BSHdj4AZ2ndqI0QWPxYzaIOio0WzcEJB9gvuysprJSLtpvc2D9mhR9jPDUk7xlJlZbH2KR5iw==}
+  /undici@6.10.1:
+    resolution: {integrity: sha512-kSzmWrOx3XBKTgPm4Tal8Hyl3yf+hzlA00SAf4goxv8LZYafKmS6gJD/7Fe5HH/DMNiFTRXvkwhLo7mUn5fuQQ==}
+    engines: {node: '>=18.0'}
+    dev: true
+
+  /undici@6.7.1:
+    resolution: {integrity: sha512-+Wtb9bAQw6HYWzCnxrPTMVEV3Q1QjYanI0E4q02ehReMuquQdLTEFEYbfs7hcImVYKcQkWSwT6buEmSVIiDDtQ==}
     engines: {node: '>=18.0'}
     dev: true
 
@@ -15291,11 +15555,9 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
-  /validate-npm-package-name@5.0.0:
-    resolution: {integrity: sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==}
+  /validate-npm-package-name@5.0.1:
+    resolution: {integrity: sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-    dependencies:
-      builtins: 5.1.0
     dev: true
 
   /validator@13.11.0:
@@ -15402,8 +15664,8 @@ packages:
       - typescript
     dev: true
 
-  /vite@5.1.7(@types/node@20.12.7)(less@4.2.0)(sass@1.71.1)(terser@5.29.1):
-    resolution: {integrity: sha512-sgnEEFTZYMui/sTlH1/XEnVNHMujOahPLGMxn1+5sIT45Xjng1Ec1K78jRP15dSmVgg5WBin9yO81j3o9OxofA==}
+  /vite@5.1.5(@types/node@20.12.7)(less@4.2.0)(sass@1.71.1)(terser@5.29.1):
+    resolution: {integrity: sha512-BdN1xh0Of/oQafhU+FvopafUp6WaYenLU/NFoL5WyJL++GxkNfieKzBhM24H3HVsPQrlAqB7iJYTHabzaRed5Q==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -15652,8 +15914,8 @@ packages:
       webpack: 5.90.3(esbuild@0.20.2)
     dev: true
 
-  /webpack-dev-middleware@6.1.2(webpack@5.90.3):
-    resolution: {integrity: sha512-Wu+EHmX326YPYUpQLKmKbTyZZJIB8/n6R09pTmB03kJmnMsVPTo9COzHZFr01txwaCAuZvfBJE4ZCHRcKs5JaQ==}
+  /webpack-dev-middleware@6.1.1(webpack@5.90.3):
+    resolution: {integrity: sha512-y51HrHaFeeWir0YO4f0g+9GwZawuigzcAdRNon6jErXy/SqV/+O6eaVAzDqE6t3e3NpGeR5CS+cCDaTC+V3yEQ==}
     engines: {node: '>= 14.15.0'}
     peerDependencies:
       webpack: ^5.0.0
@@ -15767,7 +16029,7 @@ packages:
       acorn-import-assertions: 1.9.0(acorn@8.11.3)
       browserslist: 4.23.0
       chrome-trace-event: 1.0.3
-      enhanced-resolve: 5.16.0
+      enhanced-resolve: 5.16.1
       es-module-lexer: 1.5.2
       eslint-scope: 5.1.1
       events: 3.3.0
@@ -16053,3 +16315,9 @@ packages:
     resolution: {integrity: sha512-NtTUvIlNELez7Q1DzKVIFZBzNb646boQMgpATo9z3Ftuu/gWvzxCW7jdjcUDoRGxRikrhVHB/zLXh1hxeJawvw==}
     dependencies:
       tslib: 2.6.2
+
+  /zone.js@0.14.5:
+    resolution: {integrity: sha512-9XYWZzY6PhHOSdkYryNcMm7L8EK7a4q+GbTvxbIA2a9lMdRUpGuyaYvLDcg8D6bdn+JomSsbPcilVKg6SmUx6w==}
+    dependencies:
+      tslib: 2.6.2
+    dev: true
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 22da78fa62..782515735e 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,6 +1,7 @@
 packages:
   - 'packages/*'
   - 'examples/angular/*'
+  - 'examples/lit/*'
   - 'examples/qwik/*'
   - 'examples/react/*'
   - 'examples/solid/*'
diff --git a/scripts/config.js b/scripts/config.js
index 4ebb893619..ec54b0d092 100644
--- a/scripts/config.js
+++ b/scripts/config.js
@@ -12,6 +12,14 @@ export const packages = [
     name: '@tanstack/table-core',
     packageDir: 'packages/table-core',
   },
+  {
+    name: '@tanstack/angular-table',
+    packageDir: 'packages/angular-table',
+  },
+  {
+    name: '@tanstack/lit-table',
+    packageDir: 'packages/lit-table',
+  },
   {
     name: '@tanstack/qwik-table',
     packageDir: 'packages/qwik-table',
@@ -24,14 +32,14 @@ export const packages = [
     name: '@tanstack/solid-table',
     packageDir: 'packages/solid-table',
   },
-  {
-    name: '@tanstack/vue-table',
-    packageDir: 'packages/vue-table',
-  },
   {
     name: '@tanstack/svelte-table',
     packageDir: 'packages/svelte-table',
   },
+  {
+    name: '@tanstack/vue-table',
+    packageDir: 'packages/vue-table',
+  },
   {
     name: '@tanstack/react-table-devtools',
     packageDir: 'packages/react-table-devtools',
@@ -40,10 +48,6 @@ export const packages = [
     name: '@tanstack/match-sorter-utils',
     packageDir: 'packages/match-sorter-utils',
   },
-  {
-    name: '@tanstack/angular-table',
-    packageDir: 'packages/angular-table',
-  },
 ]
 
 /**