From c34ad1086e0ca5b6d7574bef3d22cf911ccfcd09 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 11 Oct 2024 14:13:17 +0200
Subject: [PATCH 01/26] feat(Table): implement component

---
 docs/content/3.components/table.md        |  12 +-
 package.json                              |   1 +
 playground/app/app.vue                    |   1 +
 playground/app/pages/components/table.vue | 171 ++++++++++++++++++++++
 pnpm-lock.yaml                            |  20 +++
 src/runtime/components/Table.vue          | 114 +++++++++++++++
 src/runtime/types/index.ts                |   1 +
 src/theme/index.ts                        |   1 +
 src/theme/table.ts                        |  14 ++
 test/components/Table.spec.ts             |  44 ++++++
 10 files changed, 377 insertions(+), 2 deletions(-)
 create mode 100644 playground/app/pages/components/table.vue
 create mode 100644 src/runtime/components/Table.vue
 create mode 100644 src/theme/table.ts
 create mode 100644 test/components/Table.spec.ts

diff --git a/docs/content/3.components/table.md b/docs/content/3.components/table.md
index dc0c2c5b0e..9e639d3428 100644
--- a/docs/content/3.components/table.md
+++ b/docs/content/3.components/table.md
@@ -15,7 +15,7 @@ navigation:
 
 ## Examples
 
-<!-- ## API
+## API
 
 ### Props
 
@@ -29,6 +29,14 @@ navigation:
 
 :component-emits
 
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `tableApi`{lang="ts-type"} | [`Ref<Table \| null>`{lang="ts-type"}](https://tanstack.com/table/latest/docs/api/core/table#table-api) |
+
 ## Theme
 
-:component-theme -->
+:component-theme
diff --git a/package.json b/package.json
index 65004637f7..b47dceb75a 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "@nuxtjs/color-mode": "^3.5.1",
     "@tailwindcss/postcss": "4.0.0-alpha.24",
     "@tailwindcss/vite": "4.0.0-alpha.24",
+    "@tanstack/vue-table": "^8.20.5",
     "@vueuse/core": "^11.1.0",
     "@vueuse/integrations": "^11.1.0",
     "defu": "^6.1.4",
diff --git a/playground/app/app.vue b/playground/app/app.vue
index b8f65cbb8d..f72b2f8a81 100644
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -42,6 +42,7 @@ const components = [
   'slider',
   'switch',
   'tabs',
+  'table',
   'textarea',
   'toast',
   'tooltip'
diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
new file mode 100644
index 0000000000..3ccbda6b6e
--- /dev/null
+++ b/playground/app/pages/components/table.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { h } from 'vue'
+import type { ComponentExposed } from 'vue-component-type-helpers'
+import type { ColumnDef } from '@tanstack/vue-table'
+import { UCheckbox, UButton, UDropdownMenu, UTable } from '#components'
+
+const table = ref<ComponentExposed<typeof UTable>>()
+
+const data = [{
+  id: 'm5gr84i9',
+  amount: 316,
+  status: 'success',
+  email: 'ken99@yahoo.com'
+}, {
+  id: '3u1reuv4',
+  amount: 242,
+  status: 'success',
+  email: 'Abe45@gmail.com'
+}, {
+  id: 'derv1ws0',
+  amount: 837,
+  status: 'processing',
+  email: 'Monserrat44@gmail.com'
+}, {
+  id: '5kma53ae',
+  amount: 874,
+  status: 'success',
+  email: 'Silas22@gmail.com'
+}, {
+  id: 'bhqecj4p',
+  amount: 721,
+  status: 'failed',
+  email: 'carmella@hotmail.com'
+}]
+
+const columns: ColumnDef<typeof data[0]>[] = [{
+  id: 'select',
+  header: ({ table }) => h(UCheckbox, {
+    'modelValue': table.getIsAllPageRowsSelected(),
+    'indeterminate': table.getIsSomePageRowsSelected(),
+    'onUpdate:modelValue': (value: boolean) => table.toggleAllPageRowsSelected(!!value),
+    'ariaLabel': 'Select all'
+  }),
+  cell: ({ row }) => h(UCheckbox, {
+    'modelValue': row.getIsSelected(),
+    'onUpdate:modelValue': (value: boolean) => row.toggleSelected(!!value),
+    'ariaLabel': 'Select row'
+  }),
+  enableSorting: false,
+  enableHiding: false
+}, {
+  accessorKey: 'status',
+  header: 'Status',
+  cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status'))
+}, {
+  accessorKey: 'email',
+  header: ({ column }) => {
+    const isSorted = column.getIsSorted()
+
+    return h(UButton, {
+      color: 'neutral',
+      variant: 'ghost',
+      label: 'Email',
+      icon: isSorted ? (isSorted === 'asc' ? 'i-heroicons-bars-arrow-up-20-solid' : 'i-heroicons-bars-arrow-down-20-solid') : 'i-heroicons-arrows-up-down-20-solid',
+      class: '-my-3 -mx-2.5',
+      onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
+    })
+  },
+  cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email'))
+}, {
+  accessorKey: 'amount',
+  header: () => h('div', { class: 'text-right' }, 'Amount'),
+  cell: ({ row }) => {
+    const amount = Number.parseFloat(row.getValue('amount'))
+
+    // Format the amount as a dollar amount
+    const formatted = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD'
+    }).format(amount)
+
+    return h('div', { class: 'text-right font-medium' }, formatted)
+  }
+}, {
+  id: 'actions',
+  enableHiding: false,
+  cell: ({ row }) => {
+    const payment = row.original
+
+    return h('div', { class: 'relative' }, h(UDropdownMenu, {
+      items: [{
+        label: 'View',
+        onClick: () => row.toggleExpanded()
+      }]
+    }, [h('UButton', {
+      icon: 'i-heroicons-ellipsis-horizontal-20-solid'
+    })]))
+  }
+}]
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="flex gap-2 items-center py-4">
+      <UInput
+        class="max-w-sm"
+        placeholder="Filter emails..."
+        :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
+        @update:model-value="table?.tableApi?.getColumn('email')?.setFilterValue($event)"
+      />
+
+      <UDropdownMenu
+        :items="table?.tableApi?.getAllColumns().filter((column) => column.getCanHide())"
+        placeholder="Columns"
+        variant="outline"
+        :content="{ align: 'end' }"
+      >
+        <UButton label="Columns" color="neutral" variant="outline" trailing-icon="i-heroicons-chevron-down-20-solid" class="ml-auto" />
+      </UDropdownMenu>
+
+      <!-- <UDropdownMenu>
+          <UButton label="Columns"  variant="outline" class="ml-auto">
+            Columns <ChevronDown class="ml-2 h-4 w-4" />
+            </Button>
+          </ubutton>
+        <UDropdownMenuContent align="end">
+          <UDropdownMenuCheckboxItem
+            v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
+            :key="column.id"
+            class="capitalize"
+            :checked="column.getIsVisible()"
+            @update:checked="(value) => {
+              column.toggleVisibility(!!value)
+            }"
+          >
+            {{ column.id }}
+          </UDropdownMenuCheckboxItem>
+        </UDropdownMenuContent>
+      </UDropdownMenu> -->
+    </div>
+    <div class="rounded-[--ui-radius] border-[--ui-border]">
+      <UTable ref="table" :data="data" />
+    </div>
+
+    <div class="flex items-center justify-between gap-3 border-t border-[--ui-border] pt-4">
+      <div class="text-sm text-[--ui-text-muted]">
+        {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length }} of
+        {{ table?.tableApi?.getFilteredRowModel().rows.length }} row(s) selected.
+      </div>
+
+      <div class="flex items-center gap-1.5">
+        <UButton
+          color="neutral"
+          variant="outline"
+          :disabled="!table?.tableApi?.getCanPreviousPage()"
+          @click="table?.tableApi?.previousPage()"
+        >
+          Prev
+        </UButton>
+        <UButton
+          color="neutral"
+          variant="outline"
+          :disabled="!table?.tableApi?.getCanNextPage()"
+          @click="table?.tableApi?.nextPage()"
+        >
+          Next
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0780a7ec9e..e7d74b1328 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -34,6 +34,9 @@ importers:
       '@tailwindcss/vite':
         specifier: 4.0.0-alpha.24
         version: 4.0.0-alpha.24(vite@5.4.8(@types/node@22.7.4)(lightningcss@1.27.0)(terser@5.34.1))
+      '@tanstack/vue-table':
+        specifier: ^8.20.5
+        version: 8.20.5(vue@3.5.11(typescript@5.6.3))
       '@vueuse/core':
         specifier: ^11.1.0
         version: 11.1.0(vue@3.5.11(typescript@5.6.3))
@@ -2024,9 +2027,19 @@ packages:
     peerDependencies:
       vite: ^5.2.0
 
+  '@tanstack/table-core@8.20.5':
+    resolution: {integrity: sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==}
+    engines: {node: '>=12'}
+
   '@tanstack/virtual-core@3.10.8':
     resolution: {integrity: sha512-PBu00mtt95jbKFi6Llk9aik8bnR3tR/oQP1o3TSi+iG//+Q2RTIzCEgKkHG8BB86kxMNW6O8wku+Lmi+QFR6jA==}
 
+  '@tanstack/vue-table@8.20.5':
+    resolution: {integrity: sha512-2xixT3BEgSDw+jOSqPt6ylO/eutDI107t2WdFMVYIZZ45UmTHLySqNriNs0+dMaKR56K5z3t+97P6VuVnI2L+Q==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      vue: '>=3.2'
+
   '@tanstack/vue-virtual@3.10.8':
     resolution: {integrity: sha512-DB5QA8c/LfqOqIUCpSs3RdOTVroRRdqeHMqBkYrcashSZtOzIv8xbiqHgg7RYxDfkH5F3Y+e0MkuuyGNDVB0BQ==}
     peerDependencies:
@@ -8713,8 +8726,15 @@ snapshots:
       tailwindcss: 4.0.0-alpha.24
       vite: 5.4.8(@types/node@22.7.4)(lightningcss@1.27.0)(terser@5.34.1)
 
+  '@tanstack/table-core@8.20.5': {}
+
   '@tanstack/virtual-core@3.10.8': {}
 
+  '@tanstack/vue-table@8.20.5(vue@3.5.11(typescript@5.6.3))':
+    dependencies:
+      '@tanstack/table-core': 8.20.5
+      vue: 3.5.11(typescript@5.6.3)
+
   '@tanstack/vue-virtual@3.10.8(vue@3.5.11(typescript@5.6.3))':
     dependencies:
       '@tanstack/virtual-core': 3.10.8
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
new file mode 100644
index 0000000000..dd33f51c45
--- /dev/null
+++ b/src/runtime/components/Table.vue
@@ -0,0 +1,114 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import type { ColumnDef, ColumnFiltersState, ExpandedState, SortingState, VisibilityState, Updater } from '@tanstack/vue-table'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/table'
+
+const appConfig = _appConfig as AppConfig & { ui: { table: Partial<typeof theme> } }
+
+const table = tv({ extend: tv(theme), ...(appConfig.ui?.table || {}) })
+
+export interface TableProps<T> {
+  columns?: ColumnDef<T>[]
+  data: T[]
+  class?: any
+  ui?: Partial<typeof table.slots>
+}
+
+export type TableEmits = {}
+
+export interface TableSlots<T> {
+  expanded: { row: T }
+}
+</script>
+
+<script setup lang="ts" generic="T">
+import { ref, computed, type Ref } from 'vue'
+import { FlexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useVueTable } from '@tanstack/vue-table'
+import { upperFirst } from 'scule'
+
+const props = defineProps<TableProps<T>>()
+defineEmits<TableEmits>()
+defineSlots<TableSlots<T>>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = table()
+
+const sorting = ref<SortingState>([])
+const columnFilters = ref<ColumnFiltersState>([])
+const columnVisibility = ref<VisibilityState>({})
+const rowSelection = ref({})
+const expanded = ref<ExpandedState>({})
+
+const columns = computed<ColumnDef<T>[]>(() => props.columns ?? Object.keys(props.data[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: upperFirst(accessorKey) })))
+
+const tableApi = useVueTable({
+  data: props.data,
+  columns: columns.value,
+  getCoreRowModel: getCoreRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+  getSortedRowModel: getSortedRowModel(),
+  getFilteredRowModel: getFilteredRowModel(),
+  getExpandedRowModel: getExpandedRowModel(),
+  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
+  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),
+  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
+  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),
+  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),
+  state: {
+    get sorting() { return sorting.value },
+    get columnFilters() { return columnFilters.value },
+    get columnVisibility() { return columnVisibility.value },
+    get rowSelection() { return rowSelection.value },
+    get expanded() { return expanded.value }
+  }
+})
+
+function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
+  ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
+}
+
+defineExpose({
+  tableApi
+})
+</script>
+
+<template>
+  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <table :class="ui.base({ class: [props.ui?.base] })">
+      <thead :class="ui.thead({ class: [props.ui?.thead] })">
+        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })">
+          <th v-for="header in headerGroup.headers" :key="header.id" :class="ui.th({ class: [props.ui?.th] })">
+            <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
+          </th>
+        </tr>
+      </thead>
+      <tbody :class="ui.tbody({ class: [props.ui?.tbody] })">
+        <template v-if="tableApi.getRowModel().rows?.length">
+          <template v-for="row in tableApi.getRowModel().rows" :key="row.id">
+            <tr :data-state="row.getIsSelected() && 'selected'" :class="ui.tr({ class: [props.ui?.tr] })">
+              <td v-for="cell in row.getVisibleCells()" :key="cell.id" :class="ui.td({ class: [props.ui?.td] })">
+                <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+              </td>
+            </tr>
+            <tr v-if="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })">
+              <td :colspan="row.getAllCells().length" :class="ui.td({ class: [props.ui?.td] })">
+                <slot name="expanded" :row="row" />
+              </td>
+            </tr>
+          </template>
+        </template>
+
+        <tr v-else :class="ui.tr({ class: [props.ui?.tr] })">
+          <td
+            :colspan="columns?.length"
+            class="h-24 text-center"
+          >
+            No results.
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts
index bf0a1ee609..f020ed2efc 100644
--- a/src/runtime/types/index.ts
+++ b/src/runtime/types/index.ts
@@ -35,6 +35,7 @@ export * from '../components/Skeleton.vue'
 export * from '../components/Slideover.vue'
 export * from '../components/Slider.vue'
 export * from '../components/Switch.vue'
+export * from '../components/Table.vue'
 export * from '../components/Tabs.vue'
 export * from '../components/Textarea.vue'
 export * from '../components/Toast.vue'
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 8ed54a2ed1..d02a54c358 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -35,6 +35,7 @@ export { default as skeleton } from './skeleton'
 export { default as slideover } from './slideover'
 export { default as slider } from './slider'
 export { default as switch } from './switch'
+export { default as table } from './table'
 export { default as tabs } from './tabs'
 export { default as textarea } from './textarea'
 export { default as toast } from './toast'
diff --git a/src/theme/table.ts b/src/theme/table.ts
new file mode 100644
index 0000000000..455ee6d5d5
--- /dev/null
+++ b/src/theme/table.ts
@@ -0,0 +1,14 @@
+export default {
+  slots: {
+    root: 'relative overflow-x-auto',
+    base: 'min-w-full table-fixed divide-y divide-[--ui-border-accented]',
+    thead: '',
+    tbody: 'divide-y divide-[--ui-border]',
+    tr: '',
+    th: 'px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold',
+    td: 'p-4 text-sm text-[--ui-text-muted] whitespace-nowrap'
+  },
+  variants: {
+
+  }
+}
diff --git a/test/components/Table.spec.ts b/test/components/Table.spec.ts
new file mode 100644
index 0000000000..91988cf7ea
--- /dev/null
+++ b/test/components/Table.spec.ts
@@ -0,0 +1,44 @@
+import { describe, it, expect } from 'vitest'
+import Table, { type TableProps, type TableSlots } from '../../src/runtime/components/Table.vue'
+import ComponentRender from '../component-render'
+
+describe('Table', () => {
+  const data = [{
+    id: 'm5gr84i9',
+    amount: 316,
+    status: 'success',
+    email: 'ken99@yahoo.com'
+  }, {
+    id: '3u1reuv4',
+    amount: 242,
+    status: 'success',
+    email: 'Abe45@gmail.com'
+  }, {
+    id: 'derv1ws0',
+    amount: 837,
+    status: 'processing',
+    email: 'Monserrat44@gmail.com'
+  }, {
+    id: '5kma53ae',
+    amount: 874,
+    status: 'success',
+    email: 'Silas22@gmail.com'
+  }, {
+    id: 'bhqecj4p',
+    amount: 721,
+    status: 'failed',
+    email: 'carmella@hotmail.com'
+  }]
+
+  it.each([
+    // Props
+    ['with as', { props: { as: 'div' } }],
+    ['with class', { props: { class: '' } }],
+    ['with ui', { props: { ui: {} } }],
+    // Slots
+    ['with default slot', { slots: { default: () => 'Default slot' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: TableProps<any>, slots?: Partial<TableSlots> }) => {
+    const html = await ComponentRender(nameOrHtml, options, Table)
+    expect(html).toMatchSnapshot()
+  })
+})

From 25713a3074d888f6dc587f68fd093702d7d305f2 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 11 Oct 2024 14:21:03 +0200
Subject: [PATCH 02/26] feat(InputMenu/RadioGroup/Select/SelectMenu): handle
 `labelKey` and use `get` to support dot notation

---
 src/runtime/components/InputMenu.vue          |  24 ++--
 src/runtime/components/RadioGroup.vue         |  19 ++-
 src/runtime/components/Select.vue             |  15 ++-
 src/runtime/components/SelectMenu.vue         |  22 ++--
 test/components/InputMenu.spec.ts             |   7 ++
 test/components/RadioGroup.spec.ts            |   3 +
 test/components/Select.spec.ts                |   2 +
 test/components/SelectMenu.spec.ts            |   2 +
 .../__snapshots__/InputMenu.spec.ts.snap      |  70 +++++++++++
 .../__snapshots__/RadioGroup.spec.ts.snap     | 105 +++++++++++++++++
 .../__snapshots__/Select.spec.ts.snap         | 110 ++++++++++++++++++
 .../__snapshots__/SelectMenu.spec.ts.snap     |  78 +++++++++++++
 12 files changed, 436 insertions(+), 21 deletions(-)

diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index 3633bc2f46..ec36e3bde1 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -86,6 +86,11 @@ export interface InputMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelValu
    * @defaultValue undefined
    */
   valueKey?: keyof T
+  /**
+   * When `items` is an array of objects, select the field to use as the label.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
   items?: T[] | T[][]
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
@@ -124,10 +129,10 @@ import { useAppConfig } from '#imports'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
+import { get, escapeRegExp } from '../utils'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 import UChip from './Chip.vue'
-import { get, escapeRegExp } from '../utils'
 
 defineOptions({ inheritAttrs: false })
 
@@ -135,7 +140,8 @@ const props = withDefaults(defineProps<InputMenuProps<T>>(), {
   type: 'text',
   autofocusDelay: 0,
   portal: true,
-  filter: () => ['label']
+  filter: () => ['label'],
+  labelKey: 'label'
 })
 const emits = defineEmits<InputMenuEmits<T>>()
 const slots = defineSlots<InputMenuSlots<T>>()
@@ -164,9 +170,9 @@ const ui = computed(() => inputMenu({
 }))
 
 function displayValue(value: AcceptableValue): string {
-  const item = items.value.find(item => props.valueKey ? isEqual(item[props.valueKey], value) : isEqual(item, value))
+  const item = items.value.find(item => props.valueKey ? isEqual(get(item as Record<string, any>, props.valueKey as string), value) : isEqual(item, value))
 
-  return item && (typeof item === 'object' ? item.label : item)
+  return item && (typeof item === 'object' ? get(item, props.labelKey as string) : item)
 }
 
 function filterFunction(items: ArrayOrWrapped<AcceptableValue>, searchTerm: string): ArrayOrWrapped<AcceptableValue> {
@@ -174,7 +180,7 @@ function filterFunction(items: ArrayOrWrapped<AcceptableValue>, searchTerm: stri
     return items
   }
 
-  const fields = Array.isArray(props.filter) ? props.filter : ['label']
+  const fields = Array.isArray(props.filter) ? props.filter : [props.labelKey]
   const escapedSearchTerm = escapeRegExp(searchTerm)
 
   return items.filter((item) => {
@@ -183,7 +189,7 @@ function filterFunction(items: ArrayOrWrapped<AcceptableValue>, searchTerm: stri
     }
 
     return fields.some((field) => {
-      const child = get(item, field)
+      const child = get(item, field as string)
 
       return child !== null && child !== undefined && String(child).search(new RegExp(escapedSearchTerm, 'i')) !== -1
     })
@@ -325,7 +331,7 @@ defineExpose({
           <ComboboxGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
             <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
               <ComboboxLabel v-if="item?.type === 'label'" :class="ui.label({ class: props.ui?.label })">
-                {{ item.label }}
+                {{ get(item, props.labelKey as string) }}
               </ComboboxLabel>
 
               <ComboboxSeparator v-else-if="item?.type === 'separator'" :class="ui.separator({ class: props.ui?.separator })" />
@@ -334,7 +340,7 @@ defineExpose({
                 v-else
                 :class="ui.item({ class: props.ui?.item })"
                 :disabled="item.disabled"
-                :value="valueKey && typeof item === 'object' ? (item[valueKey as keyof InputMenuItem]) as AcceptableValue : item"
+                :value="valueKey && typeof item === 'object' ? get(item, props.valueKey as string) : item"
                 @select="item.select"
               >
                 <slot name="item" :item="(item as T)" :index="index">
@@ -353,7 +359,7 @@ defineExpose({
 
                   <span :class="ui.itemLabel({ class: props.ui?.itemLabel })">
                     <slot name="item-label" :item="(item as T)" :index="index">
-                      {{ typeof item === 'object' ? item.label : item }}
+                      {{ typeof item === 'object' ? get(item, props.labelKey as string) : item }}
                     </slot>
                   </span>
 
diff --git a/src/runtime/components/RadioGroup.vue b/src/runtime/components/RadioGroup.vue
index d226d9f6b8..2cabbfaa83 100644
--- a/src/runtime/components/RadioGroup.vue
+++ b/src/runtime/components/RadioGroup.vue
@@ -29,6 +29,16 @@ export interface RadioGroupProps<T> extends Pick<RadioGroupRootProps, 'defaultVa
    * @defaultValue 'value'
    */
   valueKey?: string
+  /**
+   * When `items` is an array of objects, select the field to use as the label.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
+  /**
+   * When `items` is an array of objects, select the field to use as the description.
+   * @defaultValue 'description'
+   */
+  descriptionKey?: string
   items?: T[]
   size?: RadioGroupVariants['size']
   color?: RadioGroupVariants['color']
@@ -59,9 +69,12 @@ import { computed, useId } from 'vue'
 import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, Label, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useFormField } from '../composables/useFormField'
+import { get } from '../utils'
 
 const props = withDefaults(defineProps<RadioGroupProps<T>>(), {
   valueKey: 'value',
+  labelKey: 'label',
+  descriptionKey: 'description',
   orientation: 'vertical'
 })
 const emits = defineEmits<RadioGroupEmits>()
@@ -89,11 +102,15 @@ function normalizeItem(item: any) {
     }
   }
 
-  const value = item[props.valueKey]
+  const value = get(item, props.valueKey as string)
+  const label = get(item, props.labelKey as string)
+  const description = get(item, props.descriptionKey as string)
 
   return {
     ...item,
     value,
+    label,
+    description,
     id: `${id}:${value}`
   }
 }
diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue
index 645b7df563..96dadd1dd5 100644
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -63,6 +63,11 @@ export interface SelectProps<T> extends Omit<SelectRootProps, 'dir'>, UseCompone
    * @defaultValue 'value'
    */
   valueKey?: string
+  /**
+   * When `items` is an array of objects, select the field to use as the label.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
   items?: T[] | T[][]
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
@@ -97,12 +102,14 @@ import { useAppConfig } from '#imports'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
+import { get } from '../utils'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 import UChip from './Chip.vue'
 
 const props = withDefaults(defineProps<SelectProps<T>>(), {
   valueKey: 'value',
+  labelKey: 'label',
   portal: true
 })
 const emits = defineEmits<SelectEmits>()
@@ -183,14 +190,16 @@ function onUpdateOpen(value: boolean) {
           <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
             <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
               <SelectLabel v-if="item?.type === 'label'" :class="ui.label({ class: props.ui?.label })">
-                {{ item.label }}
+                {{ get(item, props.labelKey as string) }}
               </SelectLabel>
+
               <SelectSeparator v-else-if="item?.type === 'separator'" :class="ui.separator({ class: props.ui?.separator })" />
+
               <SelectItem
                 v-else
                 :class="ui.item({ class: props.ui?.item })"
                 :disabled="item.disabled"
-                :value="typeof item === 'object' ? (item[valueKey as keyof SelectItem] as string) : item"
+                :value="typeof item === 'object' ? get(item, props.valueKey as string) : item"
               >
                 <slot name="item" :item="(item as T)" :index="index">
                   <slot name="item-leading" :item="(item as T)" :index="index">
@@ -208,7 +217,7 @@ function onUpdateOpen(value: boolean) {
 
                   <SelectItemText :class="ui.itemLabel({ class: props.ui?.itemLabel })">
                     <slot name="item-label" :item="(item as T)" :index="index">
-                      {{ typeof item === 'object' ? item.label : item }}
+                      {{ typeof item === 'object' ? get(item, props.labelKey as string) : item }}
                     </slot>
                   </SelectItemText>
 
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index b2e8825803..9061d1dd18 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -77,6 +77,11 @@ export interface SelectMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelVal
    * @defaultValue undefined
    */
   valueKey?: keyof T
+  /**
+   * When `items` is an array of objects, select the field to use as the label.
+   * @defaultValue 'label'
+   */
+  labelKey?: keyof T
   items?: T[] | T[][]
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
@@ -124,7 +129,8 @@ const props = withDefaults(defineProps<SelectMenuProps<T>>(), {
   portal: true,
   autofocusDelay: 0,
   searchInput: () => ({ placeholder: 'Search...' }),
-  filter: () => ['label']
+  filter: () => ['label'],
+  labelKey: 'label' as keyof T
 })
 const emits = defineEmits<SelectMenuEmits<T>>()
 const slots = defineSlots<SelectMenuSlots<T>>()
@@ -156,9 +162,9 @@ function displayValue(value: T): string {
     return value.map(v => displayValue(v)).join(', ')
   }
 
-  const item = items.value.find(item => props.valueKey ? isEqual(item[props.valueKey], value) : isEqual(item, value))
+  const item = items.value.find(item => props.valueKey ? isEqual(get(item as Record<string, any>, props.valueKey as string), value) : isEqual(item, value))
 
-  return item && (typeof item === 'object' ? item.label : item)
+  return item && (typeof item === 'object' ? get(item, props.labelKey as string) : item)
 }
 
 function filterFunction(items: ArrayOrWrapped<AcceptableValue>, searchTerm: string): ArrayOrWrapped<AcceptableValue> {
@@ -166,7 +172,7 @@ function filterFunction(items: ArrayOrWrapped<AcceptableValue>, searchTerm: stri
     return items
   }
 
-  const fields = Array.isArray(props.filter) ? props.filter : ['label']
+  const fields = Array.isArray(props.filter) ? props.filter : [props.labelKey]
   const escapedSearchTerm = escapeRegExp(searchTerm)
 
   return items.filter((item) => {
@@ -175,7 +181,7 @@ function filterFunction(items: ArrayOrWrapped<AcceptableValue>, searchTerm: stri
     }
 
     return fields.some((field) => {
-      const child = get(item, field)
+      const child = get(item, field as string)
 
       return child !== null && child !== undefined && String(child).search(new RegExp(escapedSearchTerm, 'i')) !== -1
     })
@@ -267,7 +273,7 @@ function onUpdateOpen(value: boolean) {
           <ComboboxGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
             <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
               <ComboboxLabel v-if="item?.type === 'label'" :class="ui.label({ class: props.ui?.label })">
-                {{ item.label }}
+                {{ get(item, props.labelKey as string) }}
               </ComboboxLabel>
 
               <ComboboxSeparator v-else-if="item?.type === 'separator'" :class="ui.separator({ class: props.ui?.separator })" />
@@ -276,7 +282,7 @@ function onUpdateOpen(value: boolean) {
                 v-else
                 :class="ui.item({ class: props.ui?.item })"
                 :disabled="item.disabled"
-                :value="valueKey && typeof item === 'object' ? (item[valueKey as keyof SelectMenuItem]) as AcceptableValue : item"
+                :value="valueKey && typeof item === 'object' ? get(item, props.valueKey as string) : item"
                 @select="item.select"
               >
                 <slot name="item" :item="(item as T)" :index="index">
@@ -295,7 +301,7 @@ function onUpdateOpen(value: boolean) {
 
                   <span :class="ui.itemLabel({ class: props.ui?.itemLabel })">
                     <slot name="item-label" :item="(item as T)" :index="index">
-                      {{ typeof item === 'object' ? item.label : item }}
+                      {{ typeof item === 'object' ? get(item, props.labelKey as string) : item }}
                     </slot>
                   </span>
 
diff --git a/test/components/InputMenu.spec.ts b/test/components/InputMenu.spec.ts
index b9bebde9a4..f2f2c1b03c 100644
--- a/test/components/InputMenu.spec.ts
+++ b/test/components/InputMenu.spec.ts
@@ -12,18 +12,23 @@ describe('InputMenu', () => {
 
   const items = [{
     label: 'Backlog',
+    value: 'backlog',
     icon: 'i-heroicons-question-mark-circle'
   }, {
     label: 'Todo',
+    value: 'todo',
     icon: 'i-heroicons-plus-circle'
   }, {
     label: 'In Progress',
+    value: 'in_progress',
     icon: 'i-heroicons-arrow-up-circle'
   }, {
     label: 'Done',
+    value: 'done',
     icon: 'i-heroicons-check-circle'
   }, {
     label: 'Canceled',
+    value: 'canceled',
     icon: 'i-heroicons-x-circle'
   }]
 
@@ -34,6 +39,8 @@ describe('InputMenu', () => {
     ['with items', { props }],
     ['with modelValue', { props: { ...props, modelValue: items[0] } }],
     ['with defaultValue', { props: { ...props, defaultValue: items[0] } }],
+    ['with valueKey', { props: { ...props, valueKey: 'value' } }],
+    ['with labelKey', { props: { ...props, labelKey: 'value' } }],
     ['with id', { props: { ...props, id: 'id' } }],
     ['with name', { props: { ...props, name: 'name' } }],
     ['with placeholder', { props: { ...props, placeholder: 'Search...' } }],
diff --git a/test/components/RadioGroup.spec.ts b/test/components/RadioGroup.spec.ts
index d335213b47..60c198b0b7 100644
--- a/test/components/RadioGroup.spec.ts
+++ b/test/components/RadioGroup.spec.ts
@@ -20,6 +20,9 @@ describe('RadioGroup', () => {
   it.each([
     ['with items', { props }],
     ['with defaultValue', { props: { ...props, defaultValue: '1' } }],
+    ['with valueKey', { props: { ...props, valueKey: 'label' } }],
+    ['with labelKey', { props: { ...props, labelKey: 'value' } }],
+    ['with descriptionKey', { props: { ...props, descriptionKey: 'value' } }],
     ['with disabled', { props: { ...props, disabled: true } }],
     ['with description', { props: { items: items.map((opt, count) => ({ ...opt, description: `Description ${count}` })) } }],
     ['with required', { props: { ...props, legend: 'Legend', required: true } }],
diff --git a/test/components/Select.spec.ts b/test/components/Select.spec.ts
index b529f3bd64..f3198826dd 100644
--- a/test/components/Select.spec.ts
+++ b/test/components/Select.spec.ts
@@ -39,6 +39,8 @@ describe('Select', () => {
     ['with items', { props }],
     ['with modelValue', { props: { ...props, modelValue: items[0] } }],
     ['with defaultValue', { props: { ...props, defaultValue: items[0] } }],
+    ['with valueKey', { props: { ...props, valueKey: 'label' } }],
+    ['with labelKey', { props: { ...props, labelKey: 'value' } }],
     ['with id', { props: { ...props, id: 'id' } }],
     ['with name', { props: { ...props, name: 'name' } }],
     ['with placeholder', { props: { ...props, placeholder: 'Search...' } }],
diff --git a/test/components/SelectMenu.spec.ts b/test/components/SelectMenu.spec.ts
index decd7f5931..38ebb1b2b2 100644
--- a/test/components/SelectMenu.spec.ts
+++ b/test/components/SelectMenu.spec.ts
@@ -39,6 +39,8 @@ describe('SelectMenu', () => {
     ['with items', { props }],
     ['with modelValue', { props: { ...props, modelValue: items[0] } }],
     ['with defaultValue', { props: { ...props, defaultValue: items[0] } }],
+    ['with valueKey', { props: { ...props, valueKey: 'value' } }],
+    ['with labelKey', { props: { ...props, labelKey: 'value' } }],
     ['with multiple', { props: { ...props, multiple: true } }],
     ['with multiple and modelValue', { props: { ...props, multiple: true, modelValue: [items[0], items[1]] } }],
     ['with id', { props: { ...props, id: 'id' } }],
diff --git a/test/components/__snapshots__/InputMenu.spec.ts.snap b/test/components/__snapshots__/InputMenu.spec.ts.snap
index 5b256f4ff9..a68be163c3 100644
--- a/test/components/__snapshots__/InputMenu.spec.ts.snap
+++ b/test/components/__snapshots__/InputMenu.spec.ts.snap
@@ -428,6 +428,41 @@ exports[`InputMenu > renders with items correctly 1`] = `
 </div>"
 `;
 
+exports[`InputMenu > renders with labelKey correctly 1`] = `
+"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[--ui-text-dimmed] size-5" aria-hidden="true"></span></button>
+  <!--teleport start-->
+  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+    <div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+      <!---->
+      <div class="divide-y divide-[--ui-border] scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
+        <div role="group" aria-labelledby="radix-vue-combobox-group-v-0-0-1" class="p-1 isolate">
+          <div id="radix-vue-combobox-option-v-0-0-3" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-2" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-combobox-item="" data-highlighted=""><span class="iconify i-heroicons:question-mark-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+          <div id="radix-vue-combobox-option-v-0-0-5" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-4" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-combobox-item=""><span class="iconify i-heroicons:plus-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+          <div id="radix-vue-combobox-option-v-0-0-7" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-6" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-combobox-item=""><span class="iconify i-heroicons:arrow-up-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">in_progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+          <div id="radix-vue-combobox-option-v-0-0-9" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-8" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-combobox-item=""><span class="iconify i-heroicons:check-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+          <div id="radix-vue-combobox-option-v-0-0-11" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-combobox-item=""><span class="iconify i-heroicons:x-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+        </div>
+      </div>
+      <style>
+        /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
+        [data-radix-combobox-viewport] {
+          scrollbar-width: none;
+          -ms-overflow-style: none;
+          -webkit-overflow-scrolling: touch;
+        }
+
+        [data-radix-combobox-viewport]::-webkit-scrollbar {
+          display: none;
+        }
+      </style>
+    </div>
+  </div>
+  <!--teleport end-->
+  <!---->
+</div>"
+`;
+
 exports[`InputMenu > renders with leading and icon correctly 1`] = `
 "<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary] pl-9 pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-[--ui-text-dimmed] size-5" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[--ui-text-dimmed] size-5" aria-hidden="true"></span></button>
   <!--teleport start-->
@@ -1420,3 +1455,38 @@ exports[`InputMenu > renders with ui correctly 1`] = `
   <!---->
 </div>"
 `;
+
+exports[`InputMenu > renders with valueKey correctly 1`] = `
+"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[--ui-text-dimmed] size-5" aria-hidden="true"></span></button>
+  <!--teleport start-->
+  <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+    <div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+      <!---->
+      <div class="divide-y divide-[--ui-border] scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
+        <div role="group" aria-labelledby="radix-vue-combobox-group-v-0-0-1" class="p-1 isolate">
+          <div id="radix-vue-combobox-option-v-0-0-3" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-2" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-combobox-item="" data-highlighted=""><span class="iconify i-heroicons:question-mark-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+          <div id="radix-vue-combobox-option-v-0-0-5" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-4" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-combobox-item=""><span class="iconify i-heroicons:plus-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+          <div id="radix-vue-combobox-option-v-0-0-7" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-6" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-combobox-item=""><span class="iconify i-heroicons:arrow-up-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+          <div id="radix-vue-combobox-option-v-0-0-9" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-8" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-combobox-item=""><span class="iconify i-heroicons:check-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+          <div id="radix-vue-combobox-option-v-0-0-11" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-combobox-item=""><span class="iconify i-heroicons:x-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+        </div>
+      </div>
+      <style>
+        /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
+        [data-radix-combobox-viewport] {
+          scrollbar-width: none;
+          -ms-overflow-style: none;
+          -webkit-overflow-scrolling: touch;
+        }
+
+        [data-radix-combobox-viewport]::-webkit-scrollbar {
+          display: none;
+        }
+      </style>
+    </div>
+  </div>
+  <!--teleport end-->
+  <!---->
+</div>"
+`;
diff --git a/test/components/__snapshots__/RadioGroup.spec.ts.snap b/test/components/__snapshots__/RadioGroup.spec.ts.snap
index e28bce9104..6138f3a414 100644
--- a/test/components/__snapshots__/RadioGroup.spec.ts.snap
+++ b/test/components/__snapshots__/RadioGroup.spec.ts.snap
@@ -147,6 +147,41 @@ exports[`RadioGroup > renders with description slot correctly 1`] = `
 </div>"
 `;
 
+exports[`RadioGroup > renders with descriptionKey correctly 1`] = `
+"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
+  <fieldset class="flex flex-col gap-1">
+    <!--v-if-->
+    <div class="flex items-start text-sm">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[--ui-border-accented] focus-visible:outline-2 focus-visible:outline-offset-[--ui-bg] focus-visible:outline-[--ui-primary] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[--ui-text]">Option 1</label>
+        <p class="text-[--ui-text-muted]">1</p>
+      </div>
+    </div>
+    <div class="flex items-start text-sm">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[--ui-border-accented] focus-visible:outline-2 focus-visible:outline-offset-[--ui-bg] focus-visible:outline-[--ui-primary] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[--ui-text]">Option 2</label>
+        <p class="text-[--ui-text-muted]">2</p>
+      </div>
+    </div>
+    <div class="flex items-start text-sm">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[--ui-border-accented] focus-visible:outline-2 focus-visible:outline-offset-[--ui-bg] focus-visible:outline-[--ui-primary] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[--ui-text]">Option 3</label>
+        <p class="text-[--ui-text-muted]">3</p>
+      </div>
+    </div>
+  </fieldset>
+</div>"
+`;
+
 exports[`RadioGroup > renders with disabled correctly 1`] = `
 "<div role="radiogroup" data-disabled="" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex flex-col gap-1">
@@ -252,6 +287,41 @@ exports[`RadioGroup > renders with label slot correctly 1`] = `
 </div>"
 `;
 
+exports[`RadioGroup > renders with labelKey correctly 1`] = `
+"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
+  <fieldset class="flex flex-col gap-1">
+    <!--v-if-->
+    <div class="flex items-start text-sm">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[--ui-border-accented] focus-visible:outline-2 focus-visible:outline-offset-[--ui-bg] focus-visible:outline-[--ui-primary] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[--ui-text]">1</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div class="flex items-start text-sm">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[--ui-border-accented] focus-visible:outline-2 focus-visible:outline-offset-[--ui-bg] focus-visible:outline-[--ui-primary] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[--ui-text]">2</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div class="flex items-start text-sm">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[--ui-border-accented] focus-visible:outline-2 focus-visible:outline-offset-[--ui-bg] focus-visible:outline-[--ui-primary] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[--ui-text]">3</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+</div>"
+`;
+
 exports[`RadioGroup > renders with legend slot correctly 1`] = `
 "<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
   <fieldset class="flex flex-col gap-1">
@@ -566,3 +636,38 @@ exports[`RadioGroup > renders with ui correctly 1`] = `
   </fieldset>
 </div>"
 `;
+
+exports[`RadioGroup > renders with valueKey correctly 1`] = `
+"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
+  <fieldset class="flex flex-col gap-1">
+    <!--v-if-->
+    <div class="flex items-start text-sm">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[--ui-border-accented] focus-visible:outline-2 focus-visible:outline-offset-[--ui-bg] focus-visible:outline-[--ui-primary] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:Option 1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 1" value="Option 1">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="v-0-0:Option 1" class="block font-medium text-[--ui-text]">Option 1</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div class="flex items-start text-sm">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[--ui-border-accented] focus-visible:outline-2 focus-visible:outline-offset-[--ui-bg] focus-visible:outline-[--ui-primary] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:Option 2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 2" value="Option 2">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="v-0-0:Option 2" class="block font-medium text-[--ui-text]">Option 2</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div class="flex items-start text-sm">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[--ui-border-accented] focus-visible:outline-2 focus-visible:outline-offset-[--ui-bg] focus-visible:outline-[--ui-primary] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:Option 3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 3" value="Option 3">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="v-0-0:Option 3" class="block font-medium text-[--ui-text]">Option 3</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+</div>"
+`;
diff --git a/test/components/__snapshots__/Select.spec.ts.snap b/test/components/__snapshots__/Select.spec.ts.snap
index b529d47a02..a5c0fdfb47 100644
--- a/test/components/__snapshots__/Select.spec.ts.snap
+++ b/test/components/__snapshots__/Select.spec.ts.snap
@@ -586,6 +586,61 @@ exports[`Select > renders with items correctly 1`] = `
 </select>"
 `;
 
+exports[`Select > renders with labelKey correctly 1`] = `
+"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary] pr-9">
+  <!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[--ui-text-dimmed] size-5" aria-hidden="true"></span></span>
+</button>
+<!--teleport start-->
+
+
+<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+  <div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-[--radix-popper-anchor-width] bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="start">
+    <div data-radix-select-viewport="" role="presentation" class="divide-y divide-[--ui-border] scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
+      <div role="group" aria-labelledby="radix-vue-select-group-v-0-0-1" class="p-1 isolate">
+        <div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:question-mark-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" class="truncate">backlog</span>
+          <!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+        </div>
+        <div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" class="truncate">todo</span>
+          <!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+        </div>
+        <div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:arrow-up-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" class="truncate">in_progress</span>
+          <!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+        </div>
+        <div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" class="truncate">done</span>
+          <!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+        </div>
+        <div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">canceled</span>
+          <!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+        </div>
+      </div>
+    </div>
+    <style>
+      /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
+      [data-radix-select-viewport] {
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        -webkit-overflow-scrolling: touch;
+      }
+
+      [data-radix-select-viewport]::-webkit-scrollbar {
+        display: none;
+      }
+    </style>
+  </div>
+</div>
+
+
+<!--teleport end-->
+<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
+  <!---->
+  <option value="backlog">backlog</option>
+  <option value="todo">todo</option>
+  <option value="in_progress">in_progress</option>
+  <option value="done">done</option>
+  <option value="canceled">canceled</option>
+</select>"
+`;
+
 exports[`Select > renders with leading and icon correctly 1`] = `
 "<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-[--ui-text-dimmed] size-5" aria-hidden="true"></span></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[--ui-text-dimmed] size-5" aria-hidden="true"></span></span></button>
 <!--teleport start-->
@@ -2115,3 +2170,58 @@ exports[`Select > renders with ui correctly 1`] = `
   <option value="canceled">Canceled</option>
 </select>"
 `;
+
+exports[`Select > renders with valueKey correctly 1`] = `
+"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary] pr-9">
+  <!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[--ui-text-dimmed] size-5" aria-hidden="true"></span></span>
+</button>
+<!--teleport start-->
+
+
+<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+  <div style="box-sizing: border-box; --radix-select-content-transform-origin: var(--radix-popper-transform-origin); --radix-select-content-available-width: var(--radix-popper-available-width); --radix-select-content-available-height: var(--radix-popper-available-height); --radix-select-trigger-width: var(--radix-popper-anchor-width); --radix-select-trigger-height: var(--radix-popper-anchor-height); display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; animation: none;" position="popper" bodylock="true" id="radix-vue-select-content-v-0-0-0" role="listbox" data-state="open" dir="ltr" data-dismissable-layer="" tabindex="-1" class="max-h-60 w-[--radix-popper-anchor-width] bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="start">
+    <div data-radix-select-viewport="" role="presentation" class="divide-y divide-[--ui-border] scroll-py-1" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
+      <div role="group" aria-labelledby="radix-vue-select-group-v-0-0-1" class="p-1 isolate">
+        <div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-2" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:question-mark-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-2" class="truncate">Backlog</span>
+          <!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+        </div>
+        <div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-3" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-3" class="truncate">Todo</span>
+          <!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+        </div>
+        <div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-4" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:arrow-up-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-4" class="truncate">In Progress</span>
+          <!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+        </div>
+        <div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-5" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:check-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-5" class="truncate">Done</span>
+          <!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+        </div>
+        <div role="option" data-radix-vue-collection-item="" aria-labelledby="radix-vue-select-item-text-v-0-0-6" aria-selected="false" data-state="unchecked" tabindex="-1" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:x-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span id="radix-vue-select-item-text-v-0-0-6" class="truncate">Canceled</span>
+          <!----><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span>
+        </div>
+      </div>
+    </div>
+    <style>
+      /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
+      [data-radix-select-viewport] {
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        -webkit-overflow-scrolling: touch;
+      }
+
+      [data-radix-select-viewport]::-webkit-scrollbar {
+        display: none;
+      }
+    </style>
+  </div>
+</div>
+
+
+<!--teleport end-->
+<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value="">
+  <!---->
+  <option value="Backlog">Backlog</option>
+  <option value="Todo">Todo</option>
+  <option value="In Progress">In Progress</option>
+  <option value="Done">Done</option>
+  <option value="Canceled">Canceled</option>
+</select>"
+`;
diff --git a/test/components/__snapshots__/SelectMenu.spec.ts.snap b/test/components/__snapshots__/SelectMenu.spec.ts.snap
index 36211deafa..2e44a6c325 100644
--- a/test/components/__snapshots__/SelectMenu.spec.ts.snap
+++ b/test/components/__snapshots__/SelectMenu.spec.ts.snap
@@ -462,6 +462,45 @@ exports[`SelectMenu > renders with items correctly 1`] = `
 </div>
 
 
+<!--teleport end-->
+<!---->"
+`;
+
+exports[`SelectMenu > renders with labelKey correctly 1`] = `
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary] pr-9" style="pointer-events: auto;" dir="ltr">
+  <!--v-if--><span class="truncate text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[--ui-text-dimmed] size-5" aria-hidden="true"></span></span>
+</button>
+<!--teleport start-->
+
+
+<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+  <div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center"><input type="text" aria-expanded="true" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="off" autofocus="" placeholder="Search..." class="placeholder-[--ui-text-dimmed] border-0 border-b border-[--ui-border] focus:outline-none text-sm px-2.5 py-1.5" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
+    <!---->
+    <div class="divide-y divide-[--ui-border] scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
+      <div role="group" aria-labelledby="radix-vue-combobox-group-v-0-0-1" class="p-1 isolate">
+        <div id="radix-vue-combobox-option-v-0-0-3" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-2" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-combobox-item="" data-highlighted=""><span class="iconify i-heroicons:question-mark-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+        <div id="radix-vue-combobox-option-v-0-0-5" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-4" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-combobox-item=""><span class="iconify i-heroicons:plus-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+        <div id="radix-vue-combobox-option-v-0-0-7" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-6" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-combobox-item=""><span class="iconify i-heroicons:arrow-up-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">in_progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+        <div id="radix-vue-combobox-option-v-0-0-9" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-8" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-combobox-item=""><span class="iconify i-heroicons:check-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+        <div id="radix-vue-combobox-option-v-0-0-11" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-combobox-item=""><span class="iconify i-heroicons:x-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+      </div>
+    </div>
+    <style>
+      /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
+      [data-radix-combobox-viewport] {
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        -webkit-overflow-scrolling: touch;
+      }
+
+      [data-radix-combobox-viewport]::-webkit-scrollbar {
+        display: none;
+      }
+    </style>
+  </div>
+</div>
+
+
 <!--teleport end-->
 <!---->"
 `;
@@ -1661,6 +1700,45 @@ exports[`SelectMenu > renders with ui correctly 1`] = `
 </div>
 
 
+<!--teleport end-->
+<!---->"
+`;
+
+exports[`SelectMenu > renders with valueKey correctly 1`] = `
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary] pr-9" style="pointer-events: auto;" dir="ltr">
+  <!--v-if--><span class="truncate text-current/50"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[--ui-text-dimmed] size-5" aria-hidden="true"></span></span>
+</button>
+<!--teleport start-->
+
+
+<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+  <div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="max-h-60 w-[--radix-popper-anchor-width] bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center"><input type="text" aria-expanded="true" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="off" autofocus="" placeholder="Search..." class="placeholder-[--ui-text-dimmed] border-0 border-b border-[--ui-border] focus:outline-none text-sm px-2.5 py-1.5" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
+    <!---->
+    <div class="divide-y divide-[--ui-border] scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
+      <div role="group" aria-labelledby="radix-vue-combobox-group-v-0-0-1" class="p-1 isolate">
+        <div id="radix-vue-combobox-option-v-0-0-3" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-2" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-combobox-item="" data-highlighted=""><span class="iconify i-heroicons:question-mark-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+        <div id="radix-vue-combobox-option-v-0-0-5" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-4" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-combobox-item=""><span class="iconify i-heroicons:plus-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+        <div id="radix-vue-combobox-option-v-0-0-7" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-6" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-combobox-item=""><span class="iconify i-heroicons:arrow-up-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+        <div id="radix-vue-combobox-option-v-0-0-9" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-8" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-combobox-item=""><span class="iconify i-heroicons:check-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+        <div id="radix-vue-combobox-option-v-0-0-11" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-combobox-item=""><span class="iconify i-heroicons:x-circle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
+      </div>
+    </div>
+    <style>
+      /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
+      [data-radix-combobox-viewport] {
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        -webkit-overflow-scrolling: touch;
+      }
+
+      [data-radix-combobox-viewport]::-webkit-scrollbar {
+        display: none;
+      }
+    </style>
+  </div>
+</div>
+
+
 <!--teleport end-->
 <!---->"
 `;

From 3e4d2d5a12c44ada7067c022ae31e64b58480af9 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 11 Oct 2024 14:39:44 +0200
Subject: [PATCH 03/26] 
 feat(Accordion/Breadcrumb/ContextMenu/DropdownMenu/NavigationMenu/Tabs): add
 `labelKey` prop

---
 src/runtime/components/Accordion.vue          | 11 ++-
 src/runtime/components/Breadcrumb.vue         | 12 ++-
 src/runtime/components/ContextMenu.vue        |  9 ++-
 src/runtime/components/ContextMenuContent.vue |  6 +-
 src/runtime/components/DropdownMenu.vue       |  9 ++-
 .../components/DropdownMenuContent.vue        |  6 +-
 src/runtime/components/NavigationMenu.vue     | 13 +++-
 src/runtime/components/Tabs.vue               | 11 ++-
 test/components/Accordion.spec.ts             |  1 +
 test/components/Breadcrumb.spec.ts            |  1 +
 test/components/ContextMenu.spec.ts           |  1 +
 test/components/DropdownMenu.spec.ts          |  1 +
 test/components/NavigationMenu.spec.ts        |  1 +
 test/components/Tabs.spec.ts                  |  1 +
 .../__snapshots__/Accordion.spec.ts.snap      | 41 ++++++++++
 .../__snapshots__/Breadcrumb.spec.ts.snap     | 13 ++++
 .../__snapshots__/ContextMenu.spec.ts.snap    | 13 ++++
 .../__snapshots__/DropdownMenu.spec.ts.snap   | 76 +++++++++++++++----
 .../__snapshots__/NavigationMenu.spec.ts.snap | 41 ++++++++++
 .../__snapshots__/Tabs.spec.ts.snap           | 11 +++
 20 files changed, 247 insertions(+), 31 deletions(-)

diff --git a/src/runtime/components/Accordion.vue b/src/runtime/components/Accordion.vue
index d281b06107..53bda29255 100644
--- a/src/runtime/components/Accordion.vue
+++ b/src/runtime/components/Accordion.vue
@@ -33,6 +33,11 @@ export interface AccordionProps<T> extends Pick<AccordionRootProps, 'collapsible
    * @defaultValue appConfig.ui.icons.chevronDown
    */
   trailingIcon?: string
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
   class?: any
   ui?: Partial<typeof accordion.slots>
 }
@@ -56,10 +61,12 @@ import { computed } from 'vue'
 import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
+import { get } from '../utils'
 
 const props = withDefaults(defineProps<AccordionProps<T>>(), {
   type: 'single',
-  collapsible: true
+  collapsible: true,
+  labelKey: 'label'
 })
 const emits = defineEmits<AccordionEmits>()
 const slots = defineSlots<AccordionSlots<T>>()
@@ -89,7 +96,7 @@ const ui = computed(() => accordion({
           </slot>
 
           <span v-if="item.label || !!slots.default" :class="ui.label({ class: props.ui?.label })">
-            <slot :item="item" :index="index" :open="open">{{ item.label }}</slot>
+            <slot :item="item" :index="index" :open="open">{{ get(item, props.labelKey as string) }}</slot>
           </span>
 
           <slot name="trailing" :item="item" :index="index" :open="open">
diff --git a/src/runtime/components/Breadcrumb.vue b/src/runtime/components/Breadcrumb.vue
index ae6d0d507c..41c7af7a56 100644
--- a/src/runtime/components/Breadcrumb.vue
+++ b/src/runtime/components/Breadcrumb.vue
@@ -30,6 +30,11 @@ export interface BreadcrumbProps<T> {
    * @defaultValue appConfig.ui.icons.chevronRight
    */
   separatorIcon?: string
+  /**
+   * The key to use to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
   class?: any
   ui?: PartialString<typeof breadcrumb.slots>
 }
@@ -49,13 +54,16 @@ export type BreadcrumbSlots<T extends { slot?: string }> = {
 <script setup lang="ts" generic="T extends BreadcrumbItem">
 import { Primitive } from 'radix-vue'
 import { useAppConfig } from '#imports'
+import { get } from '../utils'
 import { pickLinkProps } from '../utils/link'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 import ULinkBase from './LinkBase.vue'
 import ULink from './Link.vue'
 
-const props = defineProps<BreadcrumbProps<T>>()
+const props = withDefaults(defineProps<BreadcrumbProps<T>>(), {
+  labelKey: 'label'
+})
 const slots = defineSlots<BreadcrumbSlots<T>>()
 
 const appConfig = useAppConfig()
@@ -79,7 +87,7 @@ const ui = breadcrumb()
 
                 <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
                   <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="item" :active="index === items!.length - 1" :index="index">
-                    {{ item.label }}
+                    {{ get(item, props.labelKey as string) }}
                   </slot>
                 </span>
 
diff --git a/src/runtime/components/ContextMenu.vue b/src/runtime/components/ContextMenu.vue
index c19d922afa..fbed92be80 100644
--- a/src/runtime/components/ContextMenu.vue
+++ b/src/runtime/components/ContextMenu.vue
@@ -42,6 +42,11 @@ export interface ContextMenuProps<T> extends Omit<ContextMenuRootProps, 'dir'>,
    * @defaultValue true
    */
   portal?: boolean
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
   class?: any
   ui?: PartialString<typeof contextMenu.slots>
 }
@@ -69,7 +74,8 @@ import UContextMenuContent from './ContextMenuContent.vue'
 
 const props = withDefaults(defineProps<ContextMenuProps<T>>(), {
   portal: true,
-  modal: true
+  modal: true,
+  labelKey: 'label'
 })
 const emits = defineEmits<ContextMenuEmits>()
 const slots = defineSlots<ContextMenuSlots<T>>()
@@ -96,6 +102,7 @@ const ui = computed(() => contextMenu({
       v-bind="contentProps"
       :items="items"
       :portal="portal"
+      :label-key="labelKey"
     >
       <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
         <slot :name="name" v-bind="slotData" />
diff --git a/src/runtime/components/ContextMenuContent.vue b/src/runtime/components/ContextMenuContent.vue
index 8afba7d00a..dd7df51657 100644
--- a/src/runtime/components/ContextMenuContent.vue
+++ b/src/runtime/components/ContextMenuContent.vue
@@ -10,6 +10,7 @@ interface ContextMenuContentProps<T> extends Omit<RadixContextMenuContentProps,
   items?: T[] | T[][]
   portal?: boolean
   sub?: boolean
+  labelKey: string
   class?: any
   ui: typeof _contextMenu
   uiOverride?: any
@@ -24,7 +25,7 @@ import { ContextMenu } from 'radix-vue/namespaced'
 import { useForwardPropsEmits } from 'radix-vue'
 import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { omit } from '../utils'
+import { omit, get } from '../utils'
 import { pickLinkProps } from '../utils/link'
 import ULinkBase from './LinkBase.vue'
 import ULink from './Link.vue'
@@ -55,7 +56,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
 
       <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.itemLabel({ class: uiOverride?.itemLabel, active })">
         <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="(item as T)" :active="active" :index="index">
-          {{ item.label }}
+          {{ get(item, props.labelKey as string) }}
         </slot>
 
         <UIcon v-if="item.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: uiOverride?.itemLabelExternalIcon, active })" />
@@ -99,6 +100,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
               :portal="portal"
               :items="item.children"
               :align-offset="-4"
+              :label-key="labelKey"
               v-bind="item.content"
             >
               <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
diff --git a/src/runtime/components/DropdownMenu.vue b/src/runtime/components/DropdownMenu.vue
index 5f0e5b3de9..87e288b23a 100644
--- a/src/runtime/components/DropdownMenu.vue
+++ b/src/runtime/components/DropdownMenu.vue
@@ -50,6 +50,11 @@ export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'>
    * @defaultValue true
    */
   portal?: boolean
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
   class?: any
   ui?: PartialString<typeof dropdownMenu.slots>
 }
@@ -78,7 +83,8 @@ import UDropdownMenuContent from './DropdownMenuContent.vue'
 
 const props = withDefaults(defineProps<DropdownMenuProps<T>>(), {
   portal: true,
-  modal: true
+  modal: true,
+  labelKey: 'label'
 })
 const emits = defineEmits<DropdownMenuEmits>()
 const slots = defineSlots<DropdownMenuSlots<T>>()
@@ -106,6 +112,7 @@ const ui = computed(() => dropdownMenu({
       v-bind="contentProps"
       :items="items"
       :portal="portal"
+      :label-key="labelKey"
     >
       <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
         <slot :name="name" v-bind="slotData" />
diff --git a/src/runtime/components/DropdownMenuContent.vue b/src/runtime/components/DropdownMenuContent.vue
index e40482bc25..1b54d24c7b 100644
--- a/src/runtime/components/DropdownMenuContent.vue
+++ b/src/runtime/components/DropdownMenuContent.vue
@@ -10,6 +10,7 @@ interface DropdownMenuContentProps<T> extends Omit<RadixDropdownMenuContentProps
   items?: T[] | T[][]
   portal?: boolean
   sub?: boolean
+  labelKey: string
   class?: any
   ui: typeof _dropdownMenu
   uiOverride?: any
@@ -28,7 +29,7 @@ import { DropdownMenu } from 'radix-vue/namespaced'
 import { useForwardPropsEmits } from 'radix-vue'
 import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { omit } from '../utils'
+import { omit, get } from '../utils'
 import { pickLinkProps } from '../utils/link'
 import ULinkBase from './LinkBase.vue'
 import ULink from './Link.vue'
@@ -59,7 +60,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
 
       <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.itemLabel({ class: uiOverride?.itemLabel, active })">
         <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="(item as T)" :active="active" :index="index">
-          {{ item.label }}
+          {{ get(item, props.labelKey as string) }}
         </slot>
 
         <UIcon v-if="item.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: uiOverride?.itemLabelExternalIcon, active })" />
@@ -106,6 +107,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
               align="start"
               :align-offset="-4"
               :side-offset="3"
+              :label-key="labelKey"
               v-bind="item.content"
             >
               <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
index 3e502a271f..a945a7e327 100644
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -61,6 +61,11 @@ export interface NavigationMenuProps<T> extends Pick<NavigationMenuRootProps, 'd
    * @defaultValue false
    */
   arrow?: boolean
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
   class?: any
   ui?: PartialString<typeof navigationMenu.slots>
 }
@@ -82,6 +87,7 @@ export type NavigationMenuSlots<T extends { slot?: string }> = {
 import { computed, toRef } from 'vue'
 import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
+import { get } from '../utils'
 import { pickLinkProps } from '../utils/link'
 import ULinkBase from './LinkBase.vue'
 import ULink from './Link.vue'
@@ -91,7 +97,8 @@ import UBadge from './Badge.vue'
 
 const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {
   orientation: 'horizontal',
-  delayDuration: 0
+  delayDuration: 0,
+  labelKey: 'label'
 })
 const emits = defineEmits<NavigationMenuEmits>()
 const slots = defineSlots<NavigationMenuSlots<T>>()
@@ -132,7 +139,7 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
 
                   <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
                     <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="item" :active="active" :index="index">
-                      {{ item.label }}
+                      {{ get(item, props.labelKey as string) }}
                     </slot>
 
                     <UIcon v-if="item.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: props.ui?.linkLabelExternalIcon, active })" />
@@ -165,7 +172,7 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
 
                         <div :class="ui.childLinkWrapper({ class: props.ui?.childLinkWrapper })">
                           <p :class="ui.childLinkLabel({ class: props.ui?.childLinkLabel, active: childActive })">
-                            {{ childItem.label }}
+                            {{ get(childItem, props.labelKey as string) }}
 
                             <UIcon v-if="childItem.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: props.ui?.childLinkLabelExternalIcon, active: childActive })" />
                           </p>
diff --git a/src/runtime/components/Tabs.vue b/src/runtime/components/Tabs.vue
index 8f2f7e7d8e..620cb4aa4b 100644
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -44,6 +44,11 @@ export interface TabsProps<T> extends Pick<TabsRootProps<string | number>, 'defa
    * @defaultValue true
    */
   content?: boolean | Omit<TabsContentProps, 'as' | 'asChild' | 'value'>
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
   class?: any
   ui?: PartialString<typeof tabs.slots>
 }
@@ -66,11 +71,13 @@ import { computed, toRef } from 'vue'
 import { defu } from 'defu'
 import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
+import { get } from '../utils'
 
 const props = withDefaults(defineProps<TabsProps<T>>(), {
   content: true,
   defaultValue: '0',
-  orientation: 'horizontal'
+  orientation: 'horizontal',
+  labelKey: 'label'
 })
 const emits = defineEmits<TabsEmits>()
 const slots = defineSlots<TabsSlots<T>>()
@@ -98,7 +105,7 @@ const ui = computed(() => tabs({
         </slot>
 
         <span v-if="item.label || !!slots.default" :class="ui.label({ class: props.ui?.label })">
-          <slot :item="item" :index="index">{{ item.label }}</slot>
+          <slot :item="item" :index="index">{{ get(item, props.labelKey as string) }}</slot>
         </span>
 
         <slot name="trailing" :item="item" :index="index" />
diff --git a/test/components/Accordion.spec.ts b/test/components/Accordion.spec.ts
index 81075e3a6f..2a28a950f5 100644
--- a/test/components/Accordion.spec.ts
+++ b/test/components/Accordion.spec.ts
@@ -39,6 +39,7 @@ describe('Accordion', () => {
     ['with items', { props }],
     ['with modelValue', { props: { ...props, modelValue: '1' } }],
     ['with defaultValue', { props: { ...props, defaultValue: '1' } }],
+    ['with labelKey', { props: { ...props, labelKey: 'icon' } }],
     ['with as', { props: { ...props, as: 'section' } }],
     ['with type', { props: { ...props, type: 'multiple' as const } }],
     ['with disabled', { props: { ...props, disabled: true } }],
diff --git a/test/components/Breadcrumb.spec.ts b/test/components/Breadcrumb.spec.ts
index 44065d9073..e69ad8bf50 100644
--- a/test/components/Breadcrumb.spec.ts
+++ b/test/components/Breadcrumb.spec.ts
@@ -25,6 +25,7 @@ describe('Breadcrumb', () => {
   it.each([
     // Props
     ['with items', { props }],
+    ['with labelKey', { props: { ...props, labelKey: 'icon' } }],
     ['with separatorIcon', { props: { ...props, separatorIcon: 'i-heroicons-minus' } }],
     ['with class', { props: { ...props, class: 'w-48' } }],
     ['with ui', { props: { ...props, ui: { link: 'font-bold' } } }],
diff --git a/test/components/ContextMenu.spec.ts b/test/components/ContextMenu.spec.ts
index 78cb1aa294..86d2e41d8f 100644
--- a/test/components/ContextMenu.spec.ts
+++ b/test/components/ContextMenu.spec.ts
@@ -80,6 +80,7 @@ describe('ContextMenu', () => {
   it.each([
     // Props
     ['with items', { props }],
+    ['with labelKey', { props: { ...props, labelKey: 'icon' } }],
     ['with disabled', { props: { ...props, disabled: true } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
     ['with class', { props: { ...props, class: 'min-w-96' } }],
diff --git a/test/components/DropdownMenu.spec.ts b/test/components/DropdownMenu.spec.ts
index fda4fc56e8..503af425d7 100644
--- a/test/components/DropdownMenu.spec.ts
+++ b/test/components/DropdownMenu.spec.ts
@@ -124,6 +124,7 @@ describe('DropdownMenu', () => {
   it.each([
     // Props
     ['with items', { props }],
+    ['with labelKey', { props: { ...props, labelKey: 'icon' } }],
     ['with disabled', { props: { ...props, disabled: true } }],
     ['with arrow', { props: { ...props, arrow: true } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
diff --git a/test/components/NavigationMenu.spec.ts b/test/components/NavigationMenu.spec.ts
index d186eb3bd9..277283d203 100644
--- a/test/components/NavigationMenu.spec.ts
+++ b/test/components/NavigationMenu.spec.ts
@@ -79,6 +79,7 @@ describe('NavigationMenu', () => {
   it.each([
     // Props
     ['with items', { props }],
+    ['with labelKey', { props: { ...props, labelKey: 'icon' } }],
     ['with arrow', { props: { ...props, arrow: true } }],
     ['with orientation vertical', { props: { ...props, orientation: 'vertical' as const } }],
     ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant } }]),
diff --git a/test/components/Tabs.spec.ts b/test/components/Tabs.spec.ts
index 563523c867..0173150a74 100644
--- a/test/components/Tabs.spec.ts
+++ b/test/components/Tabs.spec.ts
@@ -29,6 +29,7 @@ describe('Tabs', () => {
   it.each([
     // Props
     ['with items', { props }],
+    ['with labelKey', { props: { ...props, labelKey: 'icon' } }],
     ['with modelValue', { props: { ...props, modelValue: '1' } }],
     ['with defaultValue', { props: { ...props, defaultValue: '1' } }],
     ['with orientation vertical', { props: { ...props, orientation: 'vertical' as const } }],
diff --git a/test/components/__snapshots__/Accordion.spec.ts.snap b/test/components/__snapshots__/Accordion.spec.ts.snap
index e6f32f2606..c13845d17d 100644
--- a/test/components/__snapshots__/Accordion.spec.ts.snap
+++ b/test/components/__snapshots__/Accordion.spec.ts.snap
@@ -447,6 +447,47 @@ exports[`Accordion > renders with items correctly 1`] = `
 </div>"
 `;
 
+exports[`Accordion > renders with labelKey correctly 1`] = `
+"<div class="w-full">
+  <div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-information-circle</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+    <div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
+      <!---->
+    </div>
+  </div>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-arrow-down-tray</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+    <div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
+      <!---->
+    </div>
+  </div>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-eye-dropper</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+    <div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
+      <!---->
+    </div>
+  </div>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-rectangle-group</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+    <div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
+      <!---->
+    </div>
+  </div>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-square-3-stack-3d</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+    <div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
+      <!---->
+    </div>
+  </div>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-wrench-screwdriver</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+    <div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">
+      <!---->
+    </div>
+  </div>
+</div>"
+`;
+
 exports[`Accordion > renders with leading slot correctly 1`] = `
 "<div class="w-full">
   <div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
diff --git a/test/components/__snapshots__/Breadcrumb.spec.ts.snap b/test/components/__snapshots__/Breadcrumb.spec.ts.snap
index 1f22615d7a..a285855fac 100644
--- a/test/components/__snapshots__/Breadcrumb.spec.ts.snap
+++ b/test/components/__snapshots__/Breadcrumb.spec.ts.snap
@@ -91,6 +91,19 @@ exports[`Breadcrumb > renders with items correctly 1`] = `
 </div>"
 `;
 
+exports[`Breadcrumb > renders with labelKey correctly 1`] = `
+"<div aria-label="breadcrumb" class="relative min-w-0">
+  <ol class="flex items-center gap-1.5">
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium hover:text-[--ui-text] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate"></span></a></li>
+    <li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[--ui-text-muted]" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:cube-transparent shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-cube-transparent</span></span></li>
+    <li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[--ui-text-muted]" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[--ui-primary] text-[--ui-primary] font-semibold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-link</span></a></li>
+    <!--v-if-->
+  </ol>
+</div>"
+`;
+
 exports[`Breadcrumb > renders with separator slot correctly 1`] = `
 "<div aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
diff --git a/test/components/__snapshots__/ContextMenu.spec.ts.snap b/test/components/__snapshots__/ContextMenu.spec.ts.snap
index 99aebe5152..00dab32d7f 100644
--- a/test/components/__snapshots__/ContextMenu.spec.ts.snap
+++ b/test/components/__snapshots__/ContextMenu.spec.ts.snap
@@ -114,6 +114,19 @@ exports[`ContextMenu > renders with items correctly 1`] = `
 
 
 
+<!--teleport end-->"
+`;
+
+exports[`ContextMenu > renders with labelKey correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<!---->
+
+
+
 <!--teleport end-->"
 `;
 
diff --git a/test/components/__snapshots__/DropdownMenu.spec.ts.snap b/test/components/__snapshots__/DropdownMenu.spec.ts.snap
index da538b58f9..a53381c7cf 100644
--- a/test/components/__snapshots__/DropdownMenu.spec.ts.snap
+++ b/test/components/__snapshots__/DropdownMenu.spec.ts.snap
@@ -7,7 +7,7 @@ exports[`DropdownMenu > renders with arrow correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -51,7 +51,7 @@ exports[`DropdownMenu > renders with class correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] min-w-96" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] min-w-96" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -95,7 +95,7 @@ exports[`DropdownMenu > renders with custom slot correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -137,7 +137,7 @@ exports[`DropdownMenu > renders with default slot correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-1" aria-labelledby="radix-vue-dropdown-menu-trigger-v-0-0-0" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-1" aria-labelledby="radix-vue-dropdown-menu-trigger-v-0-0-0" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -181,7 +181,7 @@ exports[`DropdownMenu > renders with disabled correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -225,7 +225,7 @@ exports[`DropdownMenu > renders with item slot correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5">Item slot</div>
     </div>
@@ -257,7 +257,7 @@ exports[`DropdownMenu > renders with item-label slot correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">Item label slot<!--v-if--></span>
         <!--v-if-->
@@ -301,7 +301,7 @@ exports[`DropdownMenu > renders with item-leading slot correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -345,7 +345,7 @@ exports[`DropdownMenu > renders with item-trailing slot correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex">Item trailing slot</span></div>
     </div>
@@ -377,7 +377,7 @@ exports[`DropdownMenu > renders with items correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none; pointer-events: auto;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none; pointer-events: auto;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -411,6 +411,50 @@ exports[`DropdownMenu > renders with items correctly 1`] = `
 
 
 
+<!--teleport end-->"
+`;
+
+exports[`DropdownMenu > renders with labelKey correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="icon" data-side="bottom" data-align="center">
+    <div role="group" class="p-1 isolate">
+      <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate"><!--v-if--></span>
+        <!--v-if-->
+      </div>
+    </div>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:user shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-user<!--v-if--></span>
+        <!--v-if-->
+      </button><button type="button" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:credit-card shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-credit-card<!--v-if--></span><span class="ms-auto inline-flex"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[--ui-radius] font-medium font-sans bg-[--ui-bg] text-[--ui-text-highlighted] ring ring-inset ring-[--ui-border-accented] h-5 min-w-[20px] text-[11px]">⌃</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[--ui-radius] font-medium font-sans bg-[--ui-bg] text-[--ui-text-highlighted] ring ring-inset ring-[--ui-border-accented] h-5 min-w-[20px] text-[11px]">B</kbd></span></span></button><button type="button" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:cog shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-cog<!--v-if--></span><span class="ms-auto inline-flex"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[--ui-radius] font-medium font-sans bg-[--ui-bg] text-[--ui-text-highlighted] ring ring-inset ring-[--ui-border-accented] h-5 min-w-[20px] text-[11px]">?</kbd></span></span></button></div>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:users shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-users<!--v-if--></span>
+        <!--v-if-->
+      </button><button role="menuitem" tabindex="-1" id="radix-vue-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-collection-item=""><span class="iconify i-heroicons:user-plus shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-user-plus<!--v-if--></span><span class="ms-auto inline-flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span></span></button>
+      <!---->
+      <!--teleport start-->
+      <!---->
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-plus<!--v-if--></span><span class="ms-auto inline-flex"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[--ui-radius] font-medium font-sans bg-[--ui-bg] text-[--ui-text-highlighted] ring ring-inset ring-[--ui-border-accented] h-5 min-w-[20px] text-[11px]">⌃</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[--ui-radius] font-medium font-sans bg-[--ui-bg] text-[--ui-text-highlighted] ring ring-inset ring-[--ui-border-accented] h-5 min-w-[20px] text-[11px]">N</kbd></span></span></button>
+    </div>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-radix-vue-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-simple-icons-github<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-[--ui-text-dimmed]" aria-hidden="true"></span></span>
+        <!--v-if-->
+      </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:lifebuoy shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-lifebuoy<!--v-if--></span>
+        <!--v-if-->
+      </a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[--ui-border]"></div><button type="button" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:key shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-key<!--v-if--></span>
+        <!--v-if-->
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:cube shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-cube<!--v-if--></span>
+        <!--v-if-->
+      </button>
+    </div>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:arrow-right-start-on-rectangle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-arrow-right-start-on-rectangle<!--v-if--></span><span class="ms-auto inline-flex"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[--ui-radius] font-medium font-sans bg-[--ui-bg] text-[--ui-text-highlighted] ring ring-inset ring-[--ui-border-accented] h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[--ui-radius] font-medium font-sans bg-[--ui-bg] text-[--ui-text-highlighted] ring ring-inset ring-[--ui-border-accented] h-5 min-w-[20px] text-[11px]">⌃</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[--ui-radius] font-medium font-sans bg-[--ui-bg] text-[--ui-text-highlighted] ring ring-inset ring-[--ui-border-accented] h-5 min-w-[20px] text-[11px]">Q</kbd></span></span></button></div>
+  </div>
+</div>
+
+
+
 <!--teleport end-->"
 `;
 
@@ -421,7 +465,7 @@ exports[`DropdownMenu > renders with size lg correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-2 text-sm gap-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -465,7 +509,7 @@ exports[`DropdownMenu > renders with size md correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -509,7 +553,7 @@ exports[`DropdownMenu > renders with size sm correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-xs gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-4 text-[8px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -553,7 +597,7 @@ exports[`DropdownMenu > renders with size xl correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-2 text-base gap-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-6 text-xs shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -597,7 +641,7 @@ exports[`DropdownMenu > renders with size xs correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1 text-xs gap-1"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-4 text-[8px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -641,7 +685,7 @@ exports[`DropdownMenu > renders with ui correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" uioverride="[object Object]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" uioverride="[object Object]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
diff --git a/test/components/__snapshots__/NavigationMenu.spec.ts.snap b/test/components/__snapshots__/NavigationMenu.spec.ts.snap
index 701806f086..5e52db2721 100644
--- a/test/components/__snapshots__/NavigationMenu.spec.ts.snap
+++ b/test/components/__snapshots__/NavigationMenu.spec.ts.snap
@@ -322,6 +322,47 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
 </nav>"
 `;
 
+exports[`NavigationMenu > renders with labelKey correctly 1`] = `
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
+  <div style="position: relative;">
+    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[--ui-primary] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[--ui-text-muted] hover:text-[--ui-text-highlighted] hover:before:bg-[--ui-bg-elevated]/50 data-[state=open]:text-[--ui-text-highlighted] data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-0-0-trigger-0" aria-controls="radix-navigation-menu-v-0-0-0-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-[--ui-text-dimmed] group-hover:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors" aria-hidden="true"></span><span class="truncate">i-heroicons-book-open<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+        <!---->
+        <!--teleport start-->
+        <!---->
+        <!--teleport end-->
+      </li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[--ui-primary] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[--ui-primary] before:bg-[--ui-bg-elevated]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-0-0-trigger-1" aria-controls="radix-navigation-menu-v-0-0-0-content-1"><span class="iconify i-heroicons:cube-transparent shrink-0 size-5 text-[--ui-primary]" aria-hidden="true"></span><span class="truncate">i-heroicons-cube-transparent<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+        <!---->
+        <!--teleport start-->
+        <!---->
+        <!--teleport end-->
+      </li>
+    </ul>
+  </div>
+  <!--v-if-->
+  <div style="position: relative;">
+    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[--ui-primary] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[--ui-text-muted] hover:text-[--ui-text-highlighted] hover:before:bg-[--ui-bg-elevated]/50 data-[state=open]:text-[--ui-text-highlighted] data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[--ui-text-dimmed] group-hover:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors" aria-hidden="true"></span><span class="truncate">i-simple-icons-github<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-[--ui-text-dimmed]" aria-hidden="true"></span></span>
+          <!--v-if-->
+        </a>
+        <!--v-if-->
+      </li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[--ui-primary] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[--ui-text-muted] cursor-not-allowed opacity-75" data-radix-vue-collection-item=""><span class="iconify i-heroicons:question-mark-circle shrink-0 size-5 text-[--ui-text-dimmed]" aria-hidden="true"></span><span class="truncate">i-heroicons-question-mark-circle<!--v-if--></span>
+          <!--v-if-->
+        </button>
+        <!--v-if-->
+      </li>
+    </ul>
+  </div>
+  <!--v-if-->
+  <div class="absolute top-full inset-x-0 flex w-full">
+    <!--v-if-->
+    <!---->
+  </div>
+</nav>"
+`;
+
 exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
   <div style="position: relative;">
diff --git a/test/components/__snapshots__/Tabs.spec.ts.snap b/test/components/__snapshots__/Tabs.spec.ts.snap
index fa07446ebf..9d943c81a0 100644
--- a/test/components/__snapshots__/Tabs.spec.ts.snap
+++ b/test/components/__snapshots__/Tabs.spec.ts.snap
@@ -66,6 +66,17 @@ exports[`Tabs > renders with items correctly 1`] = `
 </div>"
 `;
 
+exports[`Tabs > renders with labelKey correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
+  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[--ui-bg-elevated] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-[--ui-primary]"></div><button id="radix-vue-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="relative inline-flex items-center data-[state=inactive]:text-[--ui-text-muted] hover:data-[state=inactive]:text-[--ui-text] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none transition-colors flex-1 justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[--ui-bg] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]" data-radix-vue-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate"></span></button><button id="radix-vue-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="relative inline-flex items-center data-[state=inactive]:text-[--ui-text-muted] hover:data-[state=inactive]:text-[--ui-text] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none transition-colors flex-1 justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[--ui-bg] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]" data-radix-vue-collection-item=""><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-user</span></button><button id="radix-vue-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="relative inline-flex items-center data-[state=inactive]:text-[--ui-text-muted] hover:data-[state=inactive]:text-[--ui-text] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none transition-colors flex-1 justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[--ui-bg] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]" data-radix-vue-collection-item=""><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-bell</span></button>
+  </div>
+  <div id="radix-vue-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
+  <div id="radix-vue-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">And, this is the content for Tab2</div>
+  <div id="radix-vue-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">Finally, this is the content for Tab3</div>
+</div>"
+`;
+
 exports[`Tabs > renders with leading slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[--ui-bg-elevated] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">

From 8941591c594149db365eee9b1943b066045b84f2 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 11 Oct 2024 15:01:28 +0200
Subject: [PATCH 04/26] up

---
 playground/app/pages/components/table.vue | 47 +++++++++++++++++------
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
index 3ccbda6b6e..861613eb3e 100644
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { h } from 'vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
-import type { ColumnDef } from '@tanstack/vue-table'
+import type { Row, ColumnDef } from '@tanstack/vue-table'
 import { UCheckbox, UButton, UDropdownMenu, UTable } from '#components'
 
 const table = ref<ComponentExposed<typeof UTable>>()
@@ -84,19 +84,41 @@ const columns: ColumnDef<typeof data[0]>[] = [{
 }, {
   id: 'actions',
   enableHiding: false,
+  class: 'text-right',
   cell: ({ row }) => {
-    const payment = row.original
-
-    return h('div', { class: 'relative' }, h(UDropdownMenu, {
-      items: [{
-        label: 'View',
-        onClick: () => row.toggleExpanded()
-      }]
-    }, [h('UButton', {
-      icon: 'i-heroicons-ellipsis-horizontal-20-solid'
-    })]))
+    return h(UDropdownMenu, {
+      items: getRowActions(row)
+    }, h(UButton, {
+      icon: 'i-heroicons-ellipsis-vertical-20-solid',
+      color: 'neutral',
+      variant: 'ghost',
+      class: 'ml-auto'
+    }))
   }
 }]
+
+function getRowActions(row: Row<typeof data[number]>) {
+  return [{
+    type: 'label',
+    label: 'Actions'
+  }, {
+    label: 'Copy payment ID',
+    onClick() {
+      navigator.clipboard.writeText(row.original.id)
+    }
+  }, {
+    label: 'Expand',
+    onClick() {
+      row.toggleExpanded()
+    }
+  }, {
+    type: 'separator'
+  }, {
+    label: 'View customer'
+  }, {
+    label: 'View payment details'
+  }]
+}
 </script>
 
 <template>
@@ -113,6 +135,7 @@ const columns: ColumnDef<typeof data[0]>[] = [{
         :items="table?.tableApi?.getAllColumns().filter((column) => column.getCanHide())"
         placeholder="Columns"
         variant="outline"
+        label-key="id"
         :content="{ align: 'end' }"
       >
         <UButton label="Columns" color="neutral" variant="outline" trailing-icon="i-heroicons-chevron-down-20-solid" class="ml-auto" />
@@ -139,7 +162,7 @@ const columns: ColumnDef<typeof data[0]>[] = [{
       </UDropdownMenu> -->
     </div>
     <div class="rounded-[--ui-radius] border-[--ui-border]">
-      <UTable ref="table" :data="data" />
+      <UTable ref="table" :data="data" :columns="columns" />
     </div>
 
     <div class="flex items-center justify-between gap-3 border-t border-[--ui-border] pt-4">

From fbc33448f6d2f27f2296bf09c455a2f373f8b073 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 11 Oct 2024 15:28:40 +0200
Subject: [PATCH 05/26] up

---
 playground/app/pages/components/table.vue | 63 ++++++++++++-----------
 src/runtime/components/Table.vue          |  5 +-
 2 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
index 861613eb3e..3f1a705463 100644
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import { h } from 'vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
-import type { Row, ColumnDef } from '@tanstack/vue-table'
 import { UCheckbox, UButton, UDropdownMenu, UTable } from '#components'
-
-const table = ref<ComponentExposed<typeof UTable>>()
+import type { TableColumn } from '@nuxt/ui'
 
 const data = [{
   id: 'm5gr84i9',
@@ -33,7 +31,7 @@ const data = [{
   email: 'carmella@hotmail.com'
 }]
 
-const columns: ColumnDef<typeof data[0]>[] = [{
+const columns: TableColumn<typeof data[number]>[] = [{
   id: 'select',
   header: ({ table }) => h(UCheckbox, {
     'modelValue': table.getIsAllPageRowsSelected(),
@@ -84,10 +82,31 @@ const columns: ColumnDef<typeof data[0]>[] = [{
 }, {
   id: 'actions',
   enableHiding: false,
-  class: 'text-right',
   cell: ({ row }) => {
     return h(UDropdownMenu, {
-      items: getRowActions(row)
+      content: {
+        align: 'end'
+      },
+      items: [{
+        type: 'label',
+        label: 'Actions'
+      }, {
+        label: 'Copy payment ID',
+        onClick() {
+          navigator.clipboard.writeText(row.original.id)
+        }
+      }, {
+        label: 'Expand',
+        onClick() {
+          row.toggleExpanded()
+        }
+      }, {
+        type: 'separator'
+      }, {
+        label: 'View customer'
+      }, {
+        label: 'View payment details'
+      }]
     }, h(UButton, {
       icon: 'i-heroicons-ellipsis-vertical-20-solid',
       color: 'neutral',
@@ -97,28 +116,7 @@ const columns: ColumnDef<typeof data[0]>[] = [{
   }
 }]
 
-function getRowActions(row: Row<typeof data[number]>) {
-  return [{
-    type: 'label',
-    label: 'Actions'
-  }, {
-    label: 'Copy payment ID',
-    onClick() {
-      navigator.clipboard.writeText(row.original.id)
-    }
-  }, {
-    label: 'Expand',
-    onClick() {
-      row.toggleExpanded()
-    }
-  }, {
-    type: 'separator'
-  }, {
-    label: 'View customer'
-  }, {
-    label: 'View payment details'
-  }]
-}
+const table = ref<ComponentExposed<typeof UTable<typeof data[number]>>>()
 </script>
 
 <template>
@@ -161,9 +159,12 @@ function getRowActions(row: Row<typeof data[number]>) {
         </UDropdownMenuContent>
       </UDropdownMenu> -->
     </div>
-    <div class="rounded-[--ui-radius] border-[--ui-border]">
-      <UTable ref="table" :data="data" :columns="columns" />
-    </div>
+
+    <UTable ref="table" :data="data" :columns="columns" class="rounded-[--ui-radius] border-[--ui-border]">
+      <template #expanded="{ row }">
+        {{ row }}
+      </template>
+    </UTable>
 
     <div class="flex items-center justify-between gap-3 border-t border-[--ui-border] pt-4">
       <div class="text-sm text-[--ui-text-muted]">
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index dd33f51c45..aaa93a3a2a 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -9,8 +9,10 @@ const appConfig = _appConfig as AppConfig & { ui: { table: Partial<typeof theme>
 
 const table = tv({ extend: tv(theme), ...(appConfig.ui?.table || {}) })
 
+export type TableColumn<T> = ColumnDef<T>
+
 export interface TableProps<T> {
-  columns?: ColumnDef<T>[]
+  columns?: TableColumn<T>[]
   data: T[]
   class?: any
   ui?: Partial<typeof table.slots>
@@ -94,6 +96,7 @@ defineExpose({
             </tr>
             <tr v-if="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })">
               <td :colspan="row.getAllCells().length" :class="ui.td({ class: [props.ui?.td] })">
+                test
                 <slot name="expanded" :row="row" />
               </td>
             </tr>

From 15b494947061b800eeab9e23df93ae58c48aa2d1 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 11 Oct 2024 14:39:44 +0200
Subject: [PATCH 06/26] 
 feat(Accordion/Breadcrumb/ContextMenu/DropdownMenu/NavigationMenu/Tabs): add
 `labelKey` prop

---
 src/runtime/components/Accordion.vue          | 11 ++-
 src/runtime/components/Breadcrumb.vue         | 12 ++-
 src/runtime/components/ContextMenu.vue        |  9 ++-
 src/runtime/components/ContextMenuContent.vue |  6 +-
 src/runtime/components/DropdownMenu.vue       |  9 ++-
 .../components/DropdownMenuContent.vue        |  6 +-
 src/runtime/components/NavigationMenu.vue     | 13 +++-
 src/runtime/components/Tabs.vue               | 11 ++-
 test/components/Accordion.spec.ts             |  1 +
 test/components/Breadcrumb.spec.ts            |  1 +
 test/components/ContextMenu.spec.ts           |  1 +
 test/components/DropdownMenu.spec.ts          |  1 +
 test/components/NavigationMenu.spec.ts        |  1 +
 test/components/Tabs.spec.ts                  |  1 +
 .../__snapshots__/Accordion.spec.ts.snap      | 41 ++++++++++
 .../__snapshots__/Breadcrumb.spec.ts.snap     | 13 ++++
 .../__snapshots__/ContextMenu.spec.ts.snap    | 13 ++++
 .../__snapshots__/DropdownMenu.spec.ts.snap   | 76 +++++++++++++++----
 .../__snapshots__/NavigationMenu.spec.ts.snap | 41 ++++++++++
 .../__snapshots__/Tabs.spec.ts.snap           | 11 +++
 20 files changed, 247 insertions(+), 31 deletions(-)

diff --git a/src/runtime/components/Accordion.vue b/src/runtime/components/Accordion.vue
index d281b06107..53bda29255 100644
--- a/src/runtime/components/Accordion.vue
+++ b/src/runtime/components/Accordion.vue
@@ -33,6 +33,11 @@ export interface AccordionProps<T> extends Pick<AccordionRootProps, 'collapsible
    * @defaultValue appConfig.ui.icons.chevronDown
    */
   trailingIcon?: string
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
   class?: any
   ui?: Partial<typeof accordion.slots>
 }
@@ -56,10 +61,12 @@ import { computed } from 'vue'
 import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
+import { get } from '../utils'
 
 const props = withDefaults(defineProps<AccordionProps<T>>(), {
   type: 'single',
-  collapsible: true
+  collapsible: true,
+  labelKey: 'label'
 })
 const emits = defineEmits<AccordionEmits>()
 const slots = defineSlots<AccordionSlots<T>>()
@@ -89,7 +96,7 @@ const ui = computed(() => accordion({
           </slot>
 
           <span v-if="item.label || !!slots.default" :class="ui.label({ class: props.ui?.label })">
-            <slot :item="item" :index="index" :open="open">{{ item.label }}</slot>
+            <slot :item="item" :index="index" :open="open">{{ get(item, props.labelKey as string) }}</slot>
           </span>
 
           <slot name="trailing" :item="item" :index="index" :open="open">
diff --git a/src/runtime/components/Breadcrumb.vue b/src/runtime/components/Breadcrumb.vue
index ae6d0d507c..41c7af7a56 100644
--- a/src/runtime/components/Breadcrumb.vue
+++ b/src/runtime/components/Breadcrumb.vue
@@ -30,6 +30,11 @@ export interface BreadcrumbProps<T> {
    * @defaultValue appConfig.ui.icons.chevronRight
    */
   separatorIcon?: string
+  /**
+   * The key to use to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
   class?: any
   ui?: PartialString<typeof breadcrumb.slots>
 }
@@ -49,13 +54,16 @@ export type BreadcrumbSlots<T extends { slot?: string }> = {
 <script setup lang="ts" generic="T extends BreadcrumbItem">
 import { Primitive } from 'radix-vue'
 import { useAppConfig } from '#imports'
+import { get } from '../utils'
 import { pickLinkProps } from '../utils/link'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 import ULinkBase from './LinkBase.vue'
 import ULink from './Link.vue'
 
-const props = defineProps<BreadcrumbProps<T>>()
+const props = withDefaults(defineProps<BreadcrumbProps<T>>(), {
+  labelKey: 'label'
+})
 const slots = defineSlots<BreadcrumbSlots<T>>()
 
 const appConfig = useAppConfig()
@@ -79,7 +87,7 @@ const ui = breadcrumb()
 
                 <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
                   <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="item" :active="index === items!.length - 1" :index="index">
-                    {{ item.label }}
+                    {{ get(item, props.labelKey as string) }}
                   </slot>
                 </span>
 
diff --git a/src/runtime/components/ContextMenu.vue b/src/runtime/components/ContextMenu.vue
index c19d922afa..fbed92be80 100644
--- a/src/runtime/components/ContextMenu.vue
+++ b/src/runtime/components/ContextMenu.vue
@@ -42,6 +42,11 @@ export interface ContextMenuProps<T> extends Omit<ContextMenuRootProps, 'dir'>,
    * @defaultValue true
    */
   portal?: boolean
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
   class?: any
   ui?: PartialString<typeof contextMenu.slots>
 }
@@ -69,7 +74,8 @@ import UContextMenuContent from './ContextMenuContent.vue'
 
 const props = withDefaults(defineProps<ContextMenuProps<T>>(), {
   portal: true,
-  modal: true
+  modal: true,
+  labelKey: 'label'
 })
 const emits = defineEmits<ContextMenuEmits>()
 const slots = defineSlots<ContextMenuSlots<T>>()
@@ -96,6 +102,7 @@ const ui = computed(() => contextMenu({
       v-bind="contentProps"
       :items="items"
       :portal="portal"
+      :label-key="labelKey"
     >
       <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
         <slot :name="name" v-bind="slotData" />
diff --git a/src/runtime/components/ContextMenuContent.vue b/src/runtime/components/ContextMenuContent.vue
index 8afba7d00a..dd7df51657 100644
--- a/src/runtime/components/ContextMenuContent.vue
+++ b/src/runtime/components/ContextMenuContent.vue
@@ -10,6 +10,7 @@ interface ContextMenuContentProps<T> extends Omit<RadixContextMenuContentProps,
   items?: T[] | T[][]
   portal?: boolean
   sub?: boolean
+  labelKey: string
   class?: any
   ui: typeof _contextMenu
   uiOverride?: any
@@ -24,7 +25,7 @@ import { ContextMenu } from 'radix-vue/namespaced'
 import { useForwardPropsEmits } from 'radix-vue'
 import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { omit } from '../utils'
+import { omit, get } from '../utils'
 import { pickLinkProps } from '../utils/link'
 import ULinkBase from './LinkBase.vue'
 import ULink from './Link.vue'
@@ -55,7 +56,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
 
       <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.itemLabel({ class: uiOverride?.itemLabel, active })">
         <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="(item as T)" :active="active" :index="index">
-          {{ item.label }}
+          {{ get(item, props.labelKey as string) }}
         </slot>
 
         <UIcon v-if="item.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: uiOverride?.itemLabelExternalIcon, active })" />
@@ -99,6 +100,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
               :portal="portal"
               :items="item.children"
               :align-offset="-4"
+              :label-key="labelKey"
               v-bind="item.content"
             >
               <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
diff --git a/src/runtime/components/DropdownMenu.vue b/src/runtime/components/DropdownMenu.vue
index 5f0e5b3de9..87e288b23a 100644
--- a/src/runtime/components/DropdownMenu.vue
+++ b/src/runtime/components/DropdownMenu.vue
@@ -50,6 +50,11 @@ export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'>
    * @defaultValue true
    */
   portal?: boolean
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
   class?: any
   ui?: PartialString<typeof dropdownMenu.slots>
 }
@@ -78,7 +83,8 @@ import UDropdownMenuContent from './DropdownMenuContent.vue'
 
 const props = withDefaults(defineProps<DropdownMenuProps<T>>(), {
   portal: true,
-  modal: true
+  modal: true,
+  labelKey: 'label'
 })
 const emits = defineEmits<DropdownMenuEmits>()
 const slots = defineSlots<DropdownMenuSlots<T>>()
@@ -106,6 +112,7 @@ const ui = computed(() => dropdownMenu({
       v-bind="contentProps"
       :items="items"
       :portal="portal"
+      :label-key="labelKey"
     >
       <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
         <slot :name="name" v-bind="slotData" />
diff --git a/src/runtime/components/DropdownMenuContent.vue b/src/runtime/components/DropdownMenuContent.vue
index e40482bc25..1b54d24c7b 100644
--- a/src/runtime/components/DropdownMenuContent.vue
+++ b/src/runtime/components/DropdownMenuContent.vue
@@ -10,6 +10,7 @@ interface DropdownMenuContentProps<T> extends Omit<RadixDropdownMenuContentProps
   items?: T[] | T[][]
   portal?: boolean
   sub?: boolean
+  labelKey: string
   class?: any
   ui: typeof _dropdownMenu
   uiOverride?: any
@@ -28,7 +29,7 @@ import { DropdownMenu } from 'radix-vue/namespaced'
 import { useForwardPropsEmits } from 'radix-vue'
 import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { omit } from '../utils'
+import { omit, get } from '../utils'
 import { pickLinkProps } from '../utils/link'
 import ULinkBase from './LinkBase.vue'
 import ULink from './Link.vue'
@@ -59,7 +60,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
 
       <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.itemLabel({ class: uiOverride?.itemLabel, active })">
         <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="(item as T)" :active="active" :index="index">
-          {{ item.label }}
+          {{ get(item, props.labelKey as string) }}
         </slot>
 
         <UIcon v-if="item.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: uiOverride?.itemLabelExternalIcon, active })" />
@@ -106,6 +107,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
               align="start"
               :align-offset="-4"
               :side-offset="3"
+              :label-key="labelKey"
               v-bind="item.content"
             >
               <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
index 3e502a271f..a945a7e327 100644
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -61,6 +61,11 @@ export interface NavigationMenuProps<T> extends Pick<NavigationMenuRootProps, 'd
    * @defaultValue false
    */
   arrow?: boolean
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
   class?: any
   ui?: PartialString<typeof navigationMenu.slots>
 }
@@ -82,6 +87,7 @@ export type NavigationMenuSlots<T extends { slot?: string }> = {
 import { computed, toRef } from 'vue'
 import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
+import { get } from '../utils'
 import { pickLinkProps } from '../utils/link'
 import ULinkBase from './LinkBase.vue'
 import ULink from './Link.vue'
@@ -91,7 +97,8 @@ import UBadge from './Badge.vue'
 
 const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {
   orientation: 'horizontal',
-  delayDuration: 0
+  delayDuration: 0,
+  labelKey: 'label'
 })
 const emits = defineEmits<NavigationMenuEmits>()
 const slots = defineSlots<NavigationMenuSlots<T>>()
@@ -132,7 +139,7 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
 
                   <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
                     <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="item" :active="active" :index="index">
-                      {{ item.label }}
+                      {{ get(item, props.labelKey as string) }}
                     </slot>
 
                     <UIcon v-if="item.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: props.ui?.linkLabelExternalIcon, active })" />
@@ -165,7 +172,7 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
 
                         <div :class="ui.childLinkWrapper({ class: props.ui?.childLinkWrapper })">
                           <p :class="ui.childLinkLabel({ class: props.ui?.childLinkLabel, active: childActive })">
-                            {{ childItem.label }}
+                            {{ get(childItem, props.labelKey as string) }}
 
                             <UIcon v-if="childItem.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: props.ui?.childLinkLabelExternalIcon, active: childActive })" />
                           </p>
diff --git a/src/runtime/components/Tabs.vue b/src/runtime/components/Tabs.vue
index 8f2f7e7d8e..620cb4aa4b 100644
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -44,6 +44,11 @@ export interface TabsProps<T> extends Pick<TabsRootProps<string | number>, 'defa
    * @defaultValue true
    */
   content?: boolean | Omit<TabsContentProps, 'as' | 'asChild' | 'value'>
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
   class?: any
   ui?: PartialString<typeof tabs.slots>
 }
@@ -66,11 +71,13 @@ import { computed, toRef } from 'vue'
 import { defu } from 'defu'
 import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
+import { get } from '../utils'
 
 const props = withDefaults(defineProps<TabsProps<T>>(), {
   content: true,
   defaultValue: '0',
-  orientation: 'horizontal'
+  orientation: 'horizontal',
+  labelKey: 'label'
 })
 const emits = defineEmits<TabsEmits>()
 const slots = defineSlots<TabsSlots<T>>()
@@ -98,7 +105,7 @@ const ui = computed(() => tabs({
         </slot>
 
         <span v-if="item.label || !!slots.default" :class="ui.label({ class: props.ui?.label })">
-          <slot :item="item" :index="index">{{ item.label }}</slot>
+          <slot :item="item" :index="index">{{ get(item, props.labelKey as string) }}</slot>
         </span>
 
         <slot name="trailing" :item="item" :index="index" />
diff --git a/test/components/Accordion.spec.ts b/test/components/Accordion.spec.ts
index 81075e3a6f..2a28a950f5 100644
--- a/test/components/Accordion.spec.ts
+++ b/test/components/Accordion.spec.ts
@@ -39,6 +39,7 @@ describe('Accordion', () => {
     ['with items', { props }],
     ['with modelValue', { props: { ...props, modelValue: '1' } }],
     ['with defaultValue', { props: { ...props, defaultValue: '1' } }],
+    ['with labelKey', { props: { ...props, labelKey: 'icon' } }],
     ['with as', { props: { ...props, as: 'section' } }],
     ['with type', { props: { ...props, type: 'multiple' as const } }],
     ['with disabled', { props: { ...props, disabled: true } }],
diff --git a/test/components/Breadcrumb.spec.ts b/test/components/Breadcrumb.spec.ts
index 44065d9073..e69ad8bf50 100644
--- a/test/components/Breadcrumb.spec.ts
+++ b/test/components/Breadcrumb.spec.ts
@@ -25,6 +25,7 @@ describe('Breadcrumb', () => {
   it.each([
     // Props
     ['with items', { props }],
+    ['with labelKey', { props: { ...props, labelKey: 'icon' } }],
     ['with separatorIcon', { props: { ...props, separatorIcon: 'i-heroicons-minus' } }],
     ['with class', { props: { ...props, class: 'w-48' } }],
     ['with ui', { props: { ...props, ui: { link: 'font-bold' } } }],
diff --git a/test/components/ContextMenu.spec.ts b/test/components/ContextMenu.spec.ts
index 78cb1aa294..86d2e41d8f 100644
--- a/test/components/ContextMenu.spec.ts
+++ b/test/components/ContextMenu.spec.ts
@@ -80,6 +80,7 @@ describe('ContextMenu', () => {
   it.each([
     // Props
     ['with items', { props }],
+    ['with labelKey', { props: { ...props, labelKey: 'icon' } }],
     ['with disabled', { props: { ...props, disabled: true } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
     ['with class', { props: { ...props, class: 'min-w-96' } }],
diff --git a/test/components/DropdownMenu.spec.ts b/test/components/DropdownMenu.spec.ts
index fda4fc56e8..503af425d7 100644
--- a/test/components/DropdownMenu.spec.ts
+++ b/test/components/DropdownMenu.spec.ts
@@ -124,6 +124,7 @@ describe('DropdownMenu', () => {
   it.each([
     // Props
     ['with items', { props }],
+    ['with labelKey', { props: { ...props, labelKey: 'icon' } }],
     ['with disabled', { props: { ...props, disabled: true } }],
     ['with arrow', { props: { ...props, arrow: true } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
diff --git a/test/components/NavigationMenu.spec.ts b/test/components/NavigationMenu.spec.ts
index d186eb3bd9..277283d203 100644
--- a/test/components/NavigationMenu.spec.ts
+++ b/test/components/NavigationMenu.spec.ts
@@ -79,6 +79,7 @@ describe('NavigationMenu', () => {
   it.each([
     // Props
     ['with items', { props }],
+    ['with labelKey', { props: { ...props, labelKey: 'icon' } }],
     ['with arrow', { props: { ...props, arrow: true } }],
     ['with orientation vertical', { props: { ...props, orientation: 'vertical' as const } }],
     ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant } }]),
diff --git a/test/components/Tabs.spec.ts b/test/components/Tabs.spec.ts
index 563523c867..0173150a74 100644
--- a/test/components/Tabs.spec.ts
+++ b/test/components/Tabs.spec.ts
@@ -29,6 +29,7 @@ describe('Tabs', () => {
   it.each([
     // Props
     ['with items', { props }],
+    ['with labelKey', { props: { ...props, labelKey: 'icon' } }],
     ['with modelValue', { props: { ...props, modelValue: '1' } }],
     ['with defaultValue', { props: { ...props, defaultValue: '1' } }],
     ['with orientation vertical', { props: { ...props, orientation: 'vertical' as const } }],
diff --git a/test/components/__snapshots__/Accordion.spec.ts.snap b/test/components/__snapshots__/Accordion.spec.ts.snap
index e6f32f2606..c13845d17d 100644
--- a/test/components/__snapshots__/Accordion.spec.ts.snap
+++ b/test/components/__snapshots__/Accordion.spec.ts.snap
@@ -447,6 +447,47 @@ exports[`Accordion > renders with items correctly 1`] = `
 </div>"
 `;
 
+exports[`Accordion > renders with labelKey correctly 1`] = `
+"<div class="w-full">
+  <div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-information-circle</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+    <div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
+      <!---->
+    </div>
+  </div>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-arrow-down-tray</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+    <div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
+      <!---->
+    </div>
+  </div>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-eye-dropper</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+    <div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
+      <!---->
+    </div>
+  </div>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-rectangle-group</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+    <div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
+      <!---->
+    </div>
+  </div>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-square-3-stack-3d</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+    <div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
+      <!---->
+    </div>
+  </div>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-wrench-screwdriver</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+    <div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">
+      <!---->
+    </div>
+  </div>
+</div>"
+`;
+
 exports[`Accordion > renders with leading slot correctly 1`] = `
 "<div class="w-full">
   <div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
diff --git a/test/components/__snapshots__/Breadcrumb.spec.ts.snap b/test/components/__snapshots__/Breadcrumb.spec.ts.snap
index 1f22615d7a..a285855fac 100644
--- a/test/components/__snapshots__/Breadcrumb.spec.ts.snap
+++ b/test/components/__snapshots__/Breadcrumb.spec.ts.snap
@@ -91,6 +91,19 @@ exports[`Breadcrumb > renders with items correctly 1`] = `
 </div>"
 `;
 
+exports[`Breadcrumb > renders with labelKey correctly 1`] = `
+"<div aria-label="breadcrumb" class="relative min-w-0">
+  <ol class="flex items-center gap-1.5">
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium hover:text-[--ui-text] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate"></span></a></li>
+    <li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[--ui-text-muted]" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:cube-transparent shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-cube-transparent</span></span></li>
+    <li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[--ui-text-muted]" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[--ui-primary] text-[--ui-primary] font-semibold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-link</span></a></li>
+    <!--v-if-->
+  </ol>
+</div>"
+`;
+
 exports[`Breadcrumb > renders with separator slot correctly 1`] = `
 "<div aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
diff --git a/test/components/__snapshots__/ContextMenu.spec.ts.snap b/test/components/__snapshots__/ContextMenu.spec.ts.snap
index 99aebe5152..00dab32d7f 100644
--- a/test/components/__snapshots__/ContextMenu.spec.ts.snap
+++ b/test/components/__snapshots__/ContextMenu.spec.ts.snap
@@ -114,6 +114,19 @@ exports[`ContextMenu > renders with items correctly 1`] = `
 
 
 
+<!--teleport end-->"
+`;
+
+exports[`ContextMenu > renders with labelKey correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<!---->
+
+
+
 <!--teleport end-->"
 `;
 
diff --git a/test/components/__snapshots__/DropdownMenu.spec.ts.snap b/test/components/__snapshots__/DropdownMenu.spec.ts.snap
index da538b58f9..a53381c7cf 100644
--- a/test/components/__snapshots__/DropdownMenu.spec.ts.snap
+++ b/test/components/__snapshots__/DropdownMenu.spec.ts.snap
@@ -7,7 +7,7 @@ exports[`DropdownMenu > renders with arrow correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -51,7 +51,7 @@ exports[`DropdownMenu > renders with class correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] min-w-96" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] min-w-96" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -95,7 +95,7 @@ exports[`DropdownMenu > renders with custom slot correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -137,7 +137,7 @@ exports[`DropdownMenu > renders with default slot correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-1" aria-labelledby="radix-vue-dropdown-menu-trigger-v-0-0-0" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-1" aria-labelledby="radix-vue-dropdown-menu-trigger-v-0-0-0" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -181,7 +181,7 @@ exports[`DropdownMenu > renders with disabled correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -225,7 +225,7 @@ exports[`DropdownMenu > renders with item slot correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5">Item slot</div>
     </div>
@@ -257,7 +257,7 @@ exports[`DropdownMenu > renders with item-label slot correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">Item label slot<!--v-if--></span>
         <!--v-if-->
@@ -301,7 +301,7 @@ exports[`DropdownMenu > renders with item-leading slot correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -345,7 +345,7 @@ exports[`DropdownMenu > renders with item-trailing slot correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex">Item trailing slot</span></div>
     </div>
@@ -377,7 +377,7 @@ exports[`DropdownMenu > renders with items correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none; pointer-events: auto;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none; pointer-events: auto;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -411,6 +411,50 @@ exports[`DropdownMenu > renders with items correctly 1`] = `
 
 
 
+<!--teleport end-->"
+`;
+
+exports[`DropdownMenu > renders with labelKey correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="icon" data-side="bottom" data-align="center">
+    <div role="group" class="p-1 isolate">
+      <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate"><!--v-if--></span>
+        <!--v-if-->
+      </div>
+    </div>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:user shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-user<!--v-if--></span>
+        <!--v-if-->
+      </button><button type="button" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:credit-card shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-credit-card<!--v-if--></span><span class="ms-auto inline-flex"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[--ui-radius] font-medium font-sans bg-[--ui-bg] text-[--ui-text-highlighted] ring ring-inset ring-[--ui-border-accented] h-5 min-w-[20px] text-[11px]">⌃</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[--ui-radius] font-medium font-sans bg-[--ui-bg] text-[--ui-text-highlighted] ring ring-inset ring-[--ui-border-accented] h-5 min-w-[20px] text-[11px]">B</kbd></span></span></button><button type="button" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:cog shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-cog<!--v-if--></span><span class="ms-auto inline-flex"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[--ui-radius] font-medium font-sans bg-[--ui-bg] text-[--ui-text-highlighted] ring ring-inset ring-[--ui-border-accented] h-5 min-w-[20px] text-[11px]">?</kbd></span></span></button></div>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:users shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-users<!--v-if--></span>
+        <!--v-if-->
+      </button><button role="menuitem" tabindex="-1" id="radix-vue-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-radix-vue-collection-item=""><span class="iconify i-heroicons:user-plus shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-user-plus<!--v-if--></span><span class="ms-auto inline-flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span></span></button>
+      <!---->
+      <!--teleport start-->
+      <!---->
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:plus shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-plus<!--v-if--></span><span class="ms-auto inline-flex"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[--ui-radius] font-medium font-sans bg-[--ui-bg] text-[--ui-text-highlighted] ring ring-inset ring-[--ui-border-accented] h-5 min-w-[20px] text-[11px]">⌃</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[--ui-radius] font-medium font-sans bg-[--ui-bg] text-[--ui-text-highlighted] ring ring-inset ring-[--ui-border-accented] h-5 min-w-[20px] text-[11px]">N</kbd></span></span></button>
+    </div>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-radix-vue-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-simple-icons-github<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-[--ui-text-dimmed]" aria-hidden="true"></span></span>
+        <!--v-if-->
+      </a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:lifebuoy shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-lifebuoy<!--v-if--></span>
+        <!--v-if-->
+      </a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[--ui-border]"></div><button type="button" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:key shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-key<!--v-if--></span>
+        <!--v-if-->
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:cube shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-cube<!--v-if--></span>
+        <!--v-if-->
+      </button>
+    </div>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-heroicons:arrow-right-start-on-rectangle shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-arrow-right-start-on-rectangle<!--v-if--></span><span class="ms-auto inline-flex"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[--ui-radius] font-medium font-sans bg-[--ui-bg] text-[--ui-text-highlighted] ring ring-inset ring-[--ui-border-accented] h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[--ui-radius] font-medium font-sans bg-[--ui-bg] text-[--ui-text-highlighted] ring ring-inset ring-[--ui-border-accented] h-5 min-w-[20px] text-[11px]">⌃</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[--ui-radius] font-medium font-sans bg-[--ui-bg] text-[--ui-text-highlighted] ring ring-inset ring-[--ui-border-accented] h-5 min-w-[20px] text-[11px]">Q</kbd></span></span></button></div>
+  </div>
+</div>
+
+
+
 <!--teleport end-->"
 `;
 
@@ -421,7 +465,7 @@ exports[`DropdownMenu > renders with size lg correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-2 text-sm gap-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -465,7 +509,7 @@ exports[`DropdownMenu > renders with size md correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -509,7 +553,7 @@ exports[`DropdownMenu > renders with size sm correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-xs gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-4 text-[8px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -553,7 +597,7 @@ exports[`DropdownMenu > renders with size xl correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-2 text-base gap-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-6 text-xs shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -597,7 +641,7 @@ exports[`DropdownMenu > renders with size xs correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1 text-xs gap-1"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-4 text-[8px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
@@ -641,7 +685,7 @@ exports[`DropdownMenu > renders with ui correctly 1`] = `
 
 
 <div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" uioverride="[object Object]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" uioverride="[object Object]" labelkey="label" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
       <div class="w-full flex items-center font-semibold text-[--ui-text-highlighted] p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate">My account<!--v-if--></span>
         <!--v-if-->
diff --git a/test/components/__snapshots__/NavigationMenu.spec.ts.snap b/test/components/__snapshots__/NavigationMenu.spec.ts.snap
index 701806f086..5e52db2721 100644
--- a/test/components/__snapshots__/NavigationMenu.spec.ts.snap
+++ b/test/components/__snapshots__/NavigationMenu.spec.ts.snap
@@ -322,6 +322,47 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
 </nav>"
 `;
 
+exports[`NavigationMenu > renders with labelKey correctly 1`] = `
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
+  <div style="position: relative;">
+    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[--ui-primary] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[--ui-text-muted] hover:text-[--ui-text-highlighted] hover:before:bg-[--ui-bg-elevated]/50 data-[state=open]:text-[--ui-text-highlighted] data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-0-0-trigger-0" aria-controls="radix-navigation-menu-v-0-0-0-content-0"><span class="iconify i-heroicons:book-open shrink-0 size-5 text-[--ui-text-dimmed] group-hover:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors" aria-hidden="true"></span><span class="truncate">i-heroicons-book-open<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+        <!---->
+        <!--teleport start-->
+        <!---->
+        <!--teleport end-->
+      </li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[--ui-primary] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[--ui-primary] before:bg-[--ui-bg-elevated]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-0-0-trigger-1" aria-controls="radix-navigation-menu-v-0-0-0-content-1"><span class="iconify i-heroicons:cube-transparent shrink-0 size-5 text-[--ui-primary]" aria-hidden="true"></span><span class="truncate">i-heroicons-cube-transparent<!--v-if--></span><span class="ms-auto inline-flex"><!--v-if--><span class="iconify i-heroicons:chevron-down-20-solid size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+        <!---->
+        <!--teleport start-->
+        <!---->
+        <!--teleport end-->
+      </li>
+    </ul>
+  </div>
+  <!--v-if-->
+  <div style="position: relative;">
+    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[--ui-primary] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[--ui-text-muted] hover:text-[--ui-text-highlighted] hover:before:bg-[--ui-bg-elevated]/50 data-[state=open]:text-[--ui-text-highlighted] data-[state=open]:before:bg-[--ui-bg-elevated]/50 transition-colors before:transition-colors" data-radix-vue-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[--ui-text-dimmed] group-hover:text-[--ui-text] group-data-[state=open]:text-[--ui-text] transition-colors" aria-hidden="true"></span><span class="truncate">i-simple-icons-github<span class="iconify i-heroicons:arrow-up-right-20-solid size-3 align-top text-[--ui-text-dimmed]" aria-hidden="true"></span></span>
+          <!--v-if-->
+        </a>
+        <!--v-if-->
+      </li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[--ui-primary] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[--ui-text-muted] cursor-not-allowed opacity-75" data-radix-vue-collection-item=""><span class="iconify i-heroicons:question-mark-circle shrink-0 size-5 text-[--ui-text-dimmed]" aria-hidden="true"></span><span class="truncate">i-heroicons-question-mark-circle<!--v-if--></span>
+          <!--v-if-->
+        </button>
+        <!--v-if-->
+      </li>
+    </ul>
+  </div>
+  <!--v-if-->
+  <div class="absolute top-full inset-x-0 flex w-full">
+    <!--v-if-->
+    <!---->
+  </div>
+</nav>"
+`;
+
 exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
   <div style="position: relative;">
diff --git a/test/components/__snapshots__/Tabs.spec.ts.snap b/test/components/__snapshots__/Tabs.spec.ts.snap
index fa07446ebf..9d943c81a0 100644
--- a/test/components/__snapshots__/Tabs.spec.ts.snap
+++ b/test/components/__snapshots__/Tabs.spec.ts.snap
@@ -66,6 +66,17 @@ exports[`Tabs > renders with items correctly 1`] = `
 </div>"
 `;
 
+exports[`Tabs > renders with labelKey correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
+  <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[--ui-bg-elevated] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">
+    <div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-[calc(var(--ui-radius)*1.5)] shadow-sm left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] inset-y-1 bg-[--ui-primary]"></div><button id="radix-vue-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="true" class="relative inline-flex items-center data-[state=inactive]:text-[--ui-text-muted] hover:data-[state=inactive]:text-[--ui-text] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none transition-colors flex-1 justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[--ui-bg] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]" data-radix-vue-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span><span class="truncate"></span></button><button id="radix-vue-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="relative inline-flex items-center data-[state=inactive]:text-[--ui-text-muted] hover:data-[state=inactive]:text-[--ui-text] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none transition-colors flex-1 justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[--ui-bg] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]" data-radix-vue-collection-item=""><span class="iconify i-heroicons:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-user</span></button><button id="radix-vue-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" data-active="false" class="relative inline-flex items-center data-[state=inactive]:text-[--ui-text-muted] hover:data-[state=inactive]:text-[--ui-text] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none transition-colors flex-1 justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-[--ui-bg] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]" data-radix-vue-collection-item=""><span class="iconify i-heroicons:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-bell</span></button>
+  </div>
+  <div id="radix-vue-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
+  <div id="radix-vue-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">And, this is the content for Tab2</div>
+  <div id="radix-vue-tabs-v-0-0-0-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-v-0-0-0-trigger-2" hidden="" tabindex="0" class="focus:outline-none w-full">Finally, this is the content for Tab3</div>
+</div>"
+`;
+
 exports[`Tabs > renders with leading slot correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
   <div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group bg-[--ui-bg-elevated] rounded-[calc(var(--ui-radius)*2)] w-full" tabindex="0">

From ee1d46482ddab5b87317277b84cfabd9a5d8bc23 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 11 Oct 2024 15:33:09 +0200
Subject: [PATCH 07/26] fix conflicts

---
 src/runtime/components/InputMenu.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index 10a97e6340..1728945891 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -90,11 +90,7 @@ export interface InputMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelValu
    * When `items` is an array of objects, select the field to use as the label.
    * @defaultValue 'label'
    */
-<<<<<<< HEAD
-  labelKey?: string
-=======
   labelKey?: keyof T
->>>>>>> v3
   items?: T[] | T[][]
   /** Highlight the ring color like a focus state. */
   highlight?: boolean

From 85429e5a54dd0c761518c74f6fc4b7e49f9a386f Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 11 Oct 2024 15:38:12 +0200
Subject: [PATCH 08/26] up

---
 src/runtime/components/Table.vue              |  13 +-
 src/theme/table.ts                            |   3 +-
 test/components/Table.spec.ts                 |  12 +-
 .../__snapshots__/Table.spec.ts.snap          | 157 ++++++++++++++++++
 4 files changed, 171 insertions(+), 14 deletions(-)
 create mode 100644 test/components/__snapshots__/Table.spec.ts.snap

diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index aaa93a3a2a..0021da92b4 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -21,7 +21,8 @@ export interface TableProps<T> {
 export type TableEmits = {}
 
 export interface TableSlots<T> {
-  expanded: { row: T }
+  expanded(props?: { row: T }): any
+  empty(props?: {}): any
 }
 </script>
 
@@ -96,7 +97,6 @@ defineExpose({
             </tr>
             <tr v-if="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })">
               <td :colspan="row.getAllCells().length" :class="ui.td({ class: [props.ui?.td] })">
-                test
                 <slot name="expanded" :row="row" />
               </td>
             </tr>
@@ -104,11 +104,10 @@ defineExpose({
         </template>
 
         <tr v-else :class="ui.tr({ class: [props.ui?.tr] })">
-          <td
-            :colspan="columns?.length"
-            class="h-24 text-center"
-          >
-            No results.
+          <td :colspan="columns?.length" :class="ui.empty({ class: props.ui?.empty })">
+            <slot name="empty">
+              No results
+            </slot>
           </td>
         </tr>
       </tbody>
diff --git a/src/theme/table.ts b/src/theme/table.ts
index 455ee6d5d5..424c6fbbde 100644
--- a/src/theme/table.ts
+++ b/src/theme/table.ts
@@ -6,7 +6,8 @@ export default {
     tbody: 'divide-y divide-[--ui-border]',
     tr: '',
     th: 'px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold',
-    td: 'p-4 text-sm text-[--ui-text-muted] whitespace-nowrap'
+    td: 'p-4 text-sm text-[--ui-text-muted] whitespace-nowrap',
+    empty: 'h-24 text-center'
   },
   variants: {
 
diff --git a/test/components/Table.spec.ts b/test/components/Table.spec.ts
index 91988cf7ea..026561e5bb 100644
--- a/test/components/Table.spec.ts
+++ b/test/components/Table.spec.ts
@@ -30,14 +30,14 @@ describe('Table', () => {
     email: 'carmella@hotmail.com'
   }]
 
+  const props = { data }
+
   it.each([
     // Props
-    ['with as', { props: { as: 'div' } }],
-    ['with class', { props: { class: '' } }],
-    ['with ui', { props: { ui: {} } }],
-    // Slots
-    ['with default slot', { slots: { default: () => 'Default slot' } }]
-  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: TableProps<any>, slots?: Partial<TableSlots> }) => {
+    ['with data', { props }],
+    ['with class', { props: { ...props, class: 'absolute' } }],
+    ['with ui', { props: { ...props, ui: { base: 'table-auto' } } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: TableProps<typeof data[number]>, slots?: Partial<TableSlots<typeof data[number]>> }) => {
     const html = await ComponentRender(nameOrHtml, options, Table)
     expect(html).toMatchSnapshot()
   })
diff --git a/test/components/__snapshots__/Table.spec.ts.snap b/test/components/__snapshots__/Table.spec.ts.snap
new file mode 100644
index 0000000000..aa5a07cb33
--- /dev/null
+++ b/test/components/__snapshots__/Table.spec.ts.snap
@@ -0,0 +1,157 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Table > renders with class correctly 1`] = `
+"<div class="overflow-x-auto absolute">
+  <table class="min-w-full table-fixed divide-y divide-[--ui-border-accented]">
+    <thead class="">
+      <tr class="">
+        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Id</th>
+        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Amount</th>
+        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Status</th>
+        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Email</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-[--ui-border]">
+      <tr data-state="false" class="">
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">m5gr84i9</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">316</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">ken99@yahoo.com</td>
+      </tr>
+      <!--v-if-->
+      <tr data-state="false" class="">
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">3u1reuv4</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">242</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Abe45@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr data-state="false" class="">
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">derv1ws0</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">837</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">processing</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Monserrat44@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr data-state="false" class="">
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">5kma53ae</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">874</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Silas22@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr data-state="false" class="">
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">bhqecj4p</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">721</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">failed</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">carmella@hotmail.com</td>
+      </tr>
+      <!--v-if-->
+    </tbody>
+  </table>
+</div>"
+`;
+
+exports[`Table > renders with data correctly 1`] = `
+"<div class="relative overflow-x-auto">
+  <table class="min-w-full table-fixed divide-y divide-[--ui-border-accented]">
+    <thead class="">
+      <tr class="">
+        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Id</th>
+        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Amount</th>
+        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Status</th>
+        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Email</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-[--ui-border]">
+      <tr data-state="false" class="">
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">m5gr84i9</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">316</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">ken99@yahoo.com</td>
+      </tr>
+      <!--v-if-->
+      <tr data-state="false" class="">
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">3u1reuv4</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">242</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Abe45@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr data-state="false" class="">
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">derv1ws0</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">837</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">processing</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Monserrat44@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr data-state="false" class="">
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">5kma53ae</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">874</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Silas22@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr data-state="false" class="">
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">bhqecj4p</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">721</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">failed</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">carmella@hotmail.com</td>
+      </tr>
+      <!--v-if-->
+    </tbody>
+  </table>
+</div>"
+`;
+
+exports[`Table > renders with ui correctly 1`] = `
+"<div class="relative overflow-x-auto">
+  <table class="min-w-full divide-y divide-[--ui-border-accented] table-auto">
+    <thead class="">
+      <tr class="">
+        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Id</th>
+        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Amount</th>
+        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Status</th>
+        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Email</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-[--ui-border]">
+      <tr data-state="false" class="">
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">m5gr84i9</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">316</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">ken99@yahoo.com</td>
+      </tr>
+      <!--v-if-->
+      <tr data-state="false" class="">
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">3u1reuv4</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">242</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Abe45@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr data-state="false" class="">
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">derv1ws0</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">837</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">processing</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Monserrat44@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr data-state="false" class="">
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">5kma53ae</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">874</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Silas22@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr data-state="false" class="">
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">bhqecj4p</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">721</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">failed</td>
+        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">carmella@hotmail.com</td>
+      </tr>
+      <!--v-if-->
+    </tbody>
+  </table>
+</div>"
+`;

From c76bb193394e3d95a3dfe18a8fa2be823ecead09 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 11 Oct 2024 18:23:31 +0200
Subject: [PATCH 09/26] up

---
 playground/app/pages/components/table.vue     | 265 ++++++++++++------
 src/runtime/components/Table.vue              |  53 ++--
 src/runtime/composables/useModal.ts           |   2 +-
 src/runtime/composables/useSlideover.ts       |   2 +-
 src/runtime/types/component.ts                |  14 -
 .../__snapshots__/Table.spec.ts.snap          |  30 +-
 6 files changed, 235 insertions(+), 131 deletions(-)
 delete mode 100644 src/runtime/types/component.ts

diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
index 3f1a705463..ed595ece4c 100644
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -1,34 +1,131 @@
 <script setup lang="ts">
 import { h } from 'vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
-import { UCheckbox, UButton, UDropdownMenu, UTable } from '#components'
+import { UBadge, UButton, UCheckbox, UDropdownMenu, UTable } from '#components'
 import type { TableColumn } from '@nuxt/ui'
 
+const toast = useToast()
+
 const data = [{
-  id: 'm5gr84i9',
-  amount: 316,
-  status: 'success',
-  email: 'ken99@yahoo.com'
-}, {
-  id: '3u1reuv4',
-  amount: 242,
-  status: 'success',
-  email: 'Abe45@gmail.com'
-}, {
-  id: 'derv1ws0',
-  amount: 837,
-  status: 'processing',
-  email: 'Monserrat44@gmail.com'
-}, {
-  id: '5kma53ae',
-  amount: 874,
-  status: 'success',
-  email: 'Silas22@gmail.com'
-}, {
-  id: 'bhqecj4p',
-  amount: 721,
+  id: '4600',
+  date: '2024-03-11T15:30:00',
+  status: 'paid',
+  email: 'james.anderson@example.com',
+  amount: 594
+}, {
+  id: '4599',
+  date: '2024-03-11T10:10:00',
+  status: 'failed',
+  email: 'mia.white@example.com',
+  amount: 276
+}, {
+  id: '4598',
+  date: '2024-03-11T08:50:00',
+  status: 'refunded',
+  email: 'william.brown@example.com',
+  amount: 315
+}, {
+  id: '4597',
+  date: '2024-03-10T19:45:00',
+  status: 'paid',
+  email: 'emma.davis@example.com',
+  amount: 529
+}, {
+  id: '4596',
+  date: '2024-03-10T15:55:00',
+  status: 'paid',
+  email: 'ethan.harris@example.com',
+  amount: 639
+}, {
+  id: '4595',
+  date: '2024-03-10T13:40:00',
+  status: 'refunded',
+  email: 'ava.thomas@example.com',
+  amount: 428
+}, {
+  id: '4594',
+  date: '2024-03-10T09:15:00',
+  status: 'paid',
+  email: 'michael.wilson@example.com',
+  amount: 683
+}, {
+  id: '4593',
+  date: '2024-03-09T20:25:00',
+  status: 'failed',
+  email: 'olivia.taylor@example.com',
+  amount: 947
+}, {
+  id: '4592',
+  date: '2024-03-09T18:45:00',
+  status: 'paid',
+  email: 'benjamin.jackson@example.com',
+  amount: 851
+}, {
+  id: '4591',
+  date: '2024-03-09T16:05:00',
+  status: 'paid',
+  email: 'sophia.miller@example.com',
+  amount: 762
+}, {
+  id: '4590',
+  date: '2024-03-09T14:20:00',
+  status: 'paid',
+  email: 'noah.clark@example.com',
+  amount: 573
+}, {
+  id: '4589',
+  date: '2024-03-09T11:35:00',
+  status: 'failed',
+  email: 'isabella.lee@example.com',
+  amount: 389
+}, {
+  id: '4588',
+  date: '2024-03-08T22:50:00',
+  status: 'refunded',
+  email: 'liam.walker@example.com',
+  amount: 701
+}, {
+  id: '4587',
+  date: '2024-03-08T20:15:00',
+  status: 'paid',
+  email: 'charlotte.hall@example.com',
+  amount: 856
+}, {
+  id: '4586',
+  date: '2024-03-08T17:40:00',
+  status: 'paid',
+  email: 'mason.young@example.com',
+  amount: 492
+}, {
+  id: '4585',
+  date: '2024-03-08T14:55:00',
   status: 'failed',
-  email: 'carmella@hotmail.com'
+  email: 'amelia.king@example.com',
+  amount: 637
+}, {
+  id: '4584',
+  date: '2024-03-08T12:30:00',
+  status: 'paid',
+  email: 'elijah.wright@example.com',
+  amount: 784
+}, {
+  id: '4583',
+  date: '2024-03-08T09:45:00',
+  status: 'refunded',
+  email: 'harper.scott@example.com',
+  amount: 345
+}, {
+  id: '4582',
+  date: '2024-03-07T23:10:00',
+  status: 'paid',
+  email: 'evelyn.green@example.com',
+  amount: 918
+}, {
+  id: '4581',
+  date: '2024-03-07T20:25:00',
+  status: 'paid',
+  email: 'logan.baker@example.com',
+  amount: 567
 }]
 
 const columns: TableColumn<typeof data[number]>[] = [{
@@ -46,10 +143,35 @@ const columns: TableColumn<typeof data[number]>[] = [{
   }),
   enableSorting: false,
   enableHiding: false
+}, {
+  accessorKey: 'id',
+  header: '#',
+  cell: ({ row }) => `#${row.getValue('id')}`
+}, {
+  accessorKey: 'date',
+  header: 'Date',
+  cell: ({ row }) => {
+    return new Date(row.getValue('date')).toLocaleString('en-US', {
+      day: 'numeric',
+      month: 'short',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    })
+  }
 }, {
   accessorKey: 'status',
   header: 'Status',
-  cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status'))
+  cell: ({ row }) => {
+    const color = ({
+      paid: 'success' as const,
+      failed: 'error' as const,
+      refunded: 'neutral' as const
+    })[row.getValue('status') as string]
+
+    return h(UBadge, {
+      class: 'capitalize', variant: 'subtle', color }, row.getValue('status'))
+  }
 }, {
   accessorKey: 'email',
   header: ({ column }) => {
@@ -60,7 +182,7 @@ const columns: TableColumn<typeof data[number]>[] = [{
       variant: 'ghost',
       label: 'Email',
       icon: isSorted ? (isSorted === 'asc' ? 'i-heroicons-bars-arrow-up-20-solid' : 'i-heroicons-bars-arrow-down-20-solid') : 'i-heroicons-arrows-up-down-20-solid',
-      class: '-my-3 -mx-2.5',
+      class: '-mx-2.5',
       onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
     })
   },
@@ -71,10 +193,9 @@ const columns: TableColumn<typeof data[number]>[] = [{
   cell: ({ row }) => {
     const amount = Number.parseFloat(row.getValue('amount'))
 
-    // Format the amount as a dollar amount
     const formatted = new Intl.NumberFormat('en-US', {
       style: 'currency',
-      currency: 'USD'
+      currency: 'EUR'
     }).format(amount)
 
     return h('div', { class: 'text-right font-medium' }, formatted)
@@ -83,36 +204,44 @@ const columns: TableColumn<typeof data[number]>[] = [{
   id: 'actions',
   enableHiding: false,
   cell: ({ row }) => {
-    return h(UDropdownMenu, {
+    const items = [{
+      type: 'label',
+      label: 'Actions'
+    }, {
+      label: 'Copy payment ID',
+      select() {
+        navigator.clipboard.writeText(row.original.id)
+
+        toast.add({
+          title: 'Payment ID copied to clipboard!',
+          color: 'success',
+          icon: 'i-heroicons-check-circle'
+        })
+      }
+    }, {
+      label: row.getIsExpanded() ? 'Collapse' : 'Expand',
+      select() {
+        row.toggleExpanded()
+      }
+    }, {
+      type: 'separator'
+    }, {
+      label: 'View customer'
+    }, {
+      label: 'View payment details'
+    }]
+
+    return h('div', { class: 'text-right' }, h(UDropdownMenu, {
       content: {
         align: 'end'
       },
-      items: [{
-        type: 'label',
-        label: 'Actions'
-      }, {
-        label: 'Copy payment ID',
-        onClick() {
-          navigator.clipboard.writeText(row.original.id)
-        }
-      }, {
-        label: 'Expand',
-        onClick() {
-          row.toggleExpanded()
-        }
-      }, {
-        type: 'separator'
-      }, {
-        label: 'View customer'
-      }, {
-        label: 'View payment details'
-      }]
-    }, h(UButton, {
+      items
+    }, () => h(UButton, {
       icon: 'i-heroicons-ellipsis-vertical-20-solid',
       color: 'neutral',
       variant: 'ghost',
       class: 'ml-auto'
-    }))
+    })))
   }
 }]
 
@@ -120,8 +249,8 @@ const table = ref<ComponentExposed<typeof UTable<typeof data[number]>>>()
 </script>
 
 <template>
-  <div class="w-full">
-    <div class="flex gap-2 items-center py-4">
+  <div class="h-full flex flex-col flex-1 gap-4 w-full -my-8">
+    <div class="flex gap-2 items-center">
       <UInput
         class="max-w-sm"
         placeholder="Filter emails..."
@@ -138,38 +267,18 @@ const table = ref<ComponentExposed<typeof UTable<typeof data[number]>>>()
       >
         <UButton label="Columns" color="neutral" variant="outline" trailing-icon="i-heroicons-chevron-down-20-solid" class="ml-auto" />
       </UDropdownMenu>
-
-      <!-- <UDropdownMenu>
-          <UButton label="Columns"  variant="outline" class="ml-auto">
-            Columns <ChevronDown class="ml-2 h-4 w-4" />
-            </Button>
-          </ubutton>
-        <UDropdownMenuContent align="end">
-          <UDropdownMenuCheckboxItem
-            v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
-            :key="column.id"
-            class="capitalize"
-            :checked="column.getIsVisible()"
-            @update:checked="(value) => {
-              column.toggleVisibility(!!value)
-            }"
-          >
-            {{ column.id }}
-          </UDropdownMenuCheckboxItem>
-        </UDropdownMenuContent>
-      </UDropdownMenu> -->
     </div>
 
-    <UTable ref="table" :data="data" :columns="columns" class="rounded-[--ui-radius] border-[--ui-border]">
+    <UTable ref="table" :pagination="{ pageIndex: 0, pageSize: 20 }" :data="data" :columns="columns" class="border border-[--ui-border-accented] rounded-[--ui-radius] flex-1 overflow-y-auto">
       <template #expanded="{ row }">
-        {{ row }}
+        <pre>{{ row.original }}</pre>
       </template>
     </UTable>
 
-    <div class="flex items-center justify-between gap-3 border-t border-[--ui-border] pt-4">
+    <div class="flex items-center justify-between gap-3">
       <div class="text-sm text-[--ui-text-muted]">
-        {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length }} of
-        {{ table?.tableApi?.getFilteredRowModel().rows.length }} row(s) selected.
+        {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
+        {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
       </div>
 
       <div class="flex items-center gap-1.5">
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 0021da92b4..7be2059757 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { tv } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
-import type { ColumnDef, ColumnFiltersState, ExpandedState, SortingState, VisibilityState, Updater } from '@tanstack/vue-table'
+import type { PaginationOptions, Row, ColumnDef, ColumnFiltersState, ColumnPinningState, ExpandedState, SortingState, PaginationState, RowSelectionState, VisibilityState, Updater } from '@tanstack/vue-table'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/table'
 
@@ -12,6 +12,7 @@ const table = tv({ extend: tv(theme), ...(appConfig.ui?.table || {}) })
 export type TableColumn<T> = ColumnDef<T>
 
 export interface TableProps<T> {
+  paginationOptions?: Omit<PaginationOptions, 'getPaginationRowModel' | 'onPaginationChange'>
   columns?: TableColumn<T>[]
   data: T[]
   class?: any
@@ -21,13 +22,13 @@ export interface TableProps<T> {
 export type TableEmits = {}
 
 export interface TableSlots<T> {
-  expanded(props?: { row: T }): any
+  expanded(props: { row: Row<T> }): any
   empty(props?: {}): any
 }
 </script>
 
 <script setup lang="ts" generic="T">
-import { ref, computed, type Ref } from 'vue'
+import { computed, type Ref } from 'vue'
 import { FlexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useVueTable } from '@tanstack/vue-table'
 import { upperFirst } from 'scule'
 
@@ -38,33 +39,40 @@ defineSlots<TableSlots<T>>()
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = table()
 
-const sorting = ref<SortingState>([])
-const columnFilters = ref<ColumnFiltersState>([])
-const columnVisibility = ref<VisibilityState>({})
-const rowSelection = ref({})
-const expanded = ref<ExpandedState>({})
+const sortingState = defineModel<SortingState>('sorting', { default: [] })
+const paginationState = defineModel<PaginationState>('pagination', { default: undefined })
+const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
+const columnVisibilityState = defineModel<VisibilityState>('columnVisibility', { default: {} })
+const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { default: {} })
+const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: {} })
+const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
 
 const columns = computed<ColumnDef<T>[]>(() => props.columns ?? Object.keys(props.data[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: upperFirst(accessorKey) })))
 
 const tableApi = useVueTable({
-  data: props.data,
-  columns: columns.value,
+  ...(props.paginationOptions || {}),
+  get data() { return props.data },
+  get columns() { return columns.value },
   getCoreRowModel: getCoreRowModel(),
-  getPaginationRowModel: getPaginationRowModel(),
+  // getPaginationRowModel: getPaginationRowModel(),
   getSortedRowModel: getSortedRowModel(),
   getFilteredRowModel: getFilteredRowModel(),
   getExpandedRowModel: getExpandedRowModel(),
-  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
-  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),
-  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
-  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),
-  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),
+  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sortingState),
+  onPaginationChange: updaterOrValue => valueUpdater(updaterOrValue, paginationState),
+  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFiltersState),
+  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibilityState),
+  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelectionState),
+  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expandedState),
+  onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinningState),
   state: {
-    get sorting() { return sorting.value },
-    get columnFilters() { return columnFilters.value },
-    get columnVisibility() { return columnVisibility.value },
-    get rowSelection() { return rowSelection.value },
-    get expanded() { return expanded.value }
+    get sorting() { return sortingState.value },
+    // get pagination() { return props.paginationOptions ? paginationState.value : undefined },
+    get columnFilters() { return columnFiltersState.value },
+    get columnVisibility() { return columnVisibilityState.value },
+    get rowSelection() { return rowSelectionState.value },
+    get expanded() { return expandedState.value },
+    get columnPinning() { return columnPinningState.value }
   }
 })
 
@@ -87,10 +95,11 @@ defineExpose({
           </th>
         </tr>
       </thead>
+
       <tbody :class="ui.tbody({ class: [props.ui?.tbody] })">
         <template v-if="tableApi.getRowModel().rows?.length">
           <template v-for="row in tableApi.getRowModel().rows" :key="row.id">
-            <tr :data-state="row.getIsSelected() && 'selected'" :class="ui.tr({ class: [props.ui?.tr] })">
+            <tr :data-state="row.getIsSelected() ? 'selected' : undefined" :class="ui.tr({ class: [props.ui?.tr] })">
               <td v-for="cell in row.getVisibleCells()" :key="cell.id" :class="ui.td({ class: [props.ui?.td] })">
                 <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
               </td>
diff --git a/src/runtime/composables/useModal.ts b/src/runtime/composables/useModal.ts
index 7be72d66ff..d0fd8ac853 100644
--- a/src/runtime/composables/useModal.ts
+++ b/src/runtime/composables/useModal.ts
@@ -1,8 +1,8 @@
 import { ref, inject } from 'vue'
 import type { ShallowRef, Component, InjectionKey } from 'vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
 import { createSharedComposable } from '@vueuse/core'
 import type { ModalProps } from '../types'
-import type { ComponentProps } from '../types/component'
 
 export interface ModalState {
   component: Component | string
diff --git a/src/runtime/composables/useSlideover.ts b/src/runtime/composables/useSlideover.ts
index c78fc9b4da..97122d9821 100644
--- a/src/runtime/composables/useSlideover.ts
+++ b/src/runtime/composables/useSlideover.ts
@@ -1,8 +1,8 @@
 import { ref, inject } from 'vue'
 import type { ShallowRef, Component, InjectionKey } from 'vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
 import { createSharedComposable } from '@vueuse/core'
 import type { SlideoverProps } from '../types'
-import type { ComponentProps } from '../types/component'
 
 export interface SlideoverState {
   component: Component | string
diff --git a/src/runtime/types/component.ts b/src/runtime/types/component.ts
deleted file mode 100644
index 6babe7bd6c..0000000000
--- a/src/runtime/types/component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export type ComponentProps<T> =
-T extends new () => { $props: infer P } ? NonNullable<P> :
-  T extends (props: infer P, ...args: any) => any ? P :
-    Record<string, never>
-
-export type ComponentSlots<T> =
-T extends new () => { $slots: infer S } ? NonNullable<S> :
-  T extends (props: any, ctx: { slots: infer S, attrs: any, emit: any }, ...args: any) => any ? NonNullable<S> :
-    Record<string, never>
-
-export type ComponentEmit<T> =
-T extends new () => { $emit: infer E } ? NonNullable<E> :
-  T extends (props: any, ctx: { slots: any, attrs: any, emit: infer E }, ...args: any) => any ? NonNullable<E> :
-    Record<string, never>
diff --git a/test/components/__snapshots__/Table.spec.ts.snap b/test/components/__snapshots__/Table.spec.ts.snap
index aa5a07cb33..4ff91aa542 100644
--- a/test/components/__snapshots__/Table.spec.ts.snap
+++ b/test/components/__snapshots__/Table.spec.ts.snap
@@ -12,35 +12,35 @@ exports[`Table > renders with class correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[--ui-border]">
-      <tr data-state="false" class="">
+      <tr class="">
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">m5gr84i9</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">316</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-state="false" class="">
+      <tr class="">
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">3u1reuv4</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">242</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-state="false" class="">
+      <tr class="">
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">derv1ws0</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">837</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">processing</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-state="false" class="">
+      <tr class="">
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">5kma53ae</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">874</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-state="false" class="">
+      <tr class="">
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">bhqecj4p</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">721</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">failed</td>
@@ -64,35 +64,35 @@ exports[`Table > renders with data correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[--ui-border]">
-      <tr data-state="false" class="">
+      <tr class="">
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">m5gr84i9</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">316</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-state="false" class="">
+      <tr class="">
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">3u1reuv4</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">242</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-state="false" class="">
+      <tr class="">
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">derv1ws0</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">837</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">processing</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-state="false" class="">
+      <tr class="">
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">5kma53ae</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">874</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-state="false" class="">
+      <tr class="">
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">bhqecj4p</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">721</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">failed</td>
@@ -116,35 +116,35 @@ exports[`Table > renders with ui correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[--ui-border]">
-      <tr data-state="false" class="">
+      <tr class="">
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">m5gr84i9</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">316</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-state="false" class="">
+      <tr class="">
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">3u1reuv4</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">242</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-state="false" class="">
+      <tr class="">
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">derv1ws0</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">837</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">processing</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-state="false" class="">
+      <tr class="">
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">5kma53ae</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">874</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-state="false" class="">
+      <tr class="">
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">bhqecj4p</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">721</td>
         <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">failed</td>

From ff50e6ba10cfd101932abdad778cf3aa4fea3926 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sun, 13 Oct 2024 12:14:02 +0200
Subject: [PATCH 10/26] up

---
 playground/app/pages/components/table.vue     |   4 +-
 src/theme/table.ts                            |  11 +-
 .../__snapshots__/Table.spec.ts.snap          | 156 +++++++++---------
 3 files changed, 84 insertions(+), 87 deletions(-)

diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
index ed595ece4c..3ec5e67546 100644
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -269,14 +269,14 @@ const table = ref<ComponentExposed<typeof UTable<typeof data[number]>>>()
       </UDropdownMenu>
     </div>
 
-    <UTable ref="table" :pagination="{ pageIndex: 0, pageSize: 20 }" :data="data" :columns="columns" class="border border-[--ui-border-accented] rounded-[--ui-radius] flex-1 overflow-y-auto">
+    <UTable ref="table" :pagination="{ pageIndex: 0, pageSize: 20 }" :data="data" :columns="columns" class="border border-[var(--ui-border-accented)] rounded-[var(--ui-radius)] flex-1 overflow-y-auto">
       <template #expanded="{ row }">
         <pre>{{ row.original }}</pre>
       </template>
     </UTable>
 
     <div class="flex items-center justify-between gap-3">
-      <div class="text-sm text-[--ui-text-muted]">
+      <div class="text-sm text-[var(--ui-text-muted)]">
         {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
         {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
       </div>
diff --git a/src/theme/table.ts b/src/theme/table.ts
index 424c6fbbde..22515adb2a 100644
--- a/src/theme/table.ts
+++ b/src/theme/table.ts
@@ -1,15 +1,12 @@
 export default {
   slots: {
     root: 'relative overflow-x-auto',
-    base: 'min-w-full table-fixed divide-y divide-[--ui-border-accented]',
+    base: 'min-w-full table-fixed divide-y divide-[var(--ui-border-accented)]',
     thead: '',
-    tbody: 'divide-y divide-[--ui-border]',
+    tbody: 'divide-y divide-[var(--ui-border)]',
     tr: '',
-    th: 'px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold',
-    td: 'p-4 text-sm text-[--ui-text-muted] whitespace-nowrap',
+    th: 'px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold',
+    td: 'p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap',
     empty: 'h-24 text-center'
-  },
-  variants: {
-
   }
 }
diff --git a/test/components/__snapshots__/Table.spec.ts.snap b/test/components/__snapshots__/Table.spec.ts.snap
index 4ff91aa542..d1a3eadce5 100644
--- a/test/components/__snapshots__/Table.spec.ts.snap
+++ b/test/components/__snapshots__/Table.spec.ts.snap
@@ -2,49 +2,49 @@
 
 exports[`Table > renders with class correctly 1`] = `
 "<div class="overflow-x-auto absolute">
-  <table class="min-w-full table-fixed divide-y divide-[--ui-border-accented]">
+  <table class="min-w-full table-fixed divide-y divide-[var(--ui-border-accented)]">
     <thead class="">
       <tr class="">
-        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Id</th>
-        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Amount</th>
-        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Status</th>
-        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Email</th>
+        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Id</th>
+        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Amount</th>
+        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Status</th>
+        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Email</th>
       </tr>
     </thead>
-    <tbody class="divide-y divide-[--ui-border]">
+    <tbody class="divide-y divide-[var(--ui-border)]">
       <tr class="">
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">m5gr84i9</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">316</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">ken99@yahoo.com</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">m5gr84i9</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">316</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">success</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
       <tr class="">
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">3u1reuv4</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">242</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Abe45@gmail.com</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">3u1reuv4</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">242</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">success</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
       <tr class="">
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">derv1ws0</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">837</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">processing</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Monserrat44@gmail.com</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">derv1ws0</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">837</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">processing</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
       <tr class="">
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">5kma53ae</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">874</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Silas22@gmail.com</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">5kma53ae</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">874</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">success</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
       <tr class="">
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">bhqecj4p</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">721</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">failed</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">carmella@hotmail.com</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">bhqecj4p</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">721</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">failed</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -54,49 +54,49 @@ exports[`Table > renders with class correctly 1`] = `
 
 exports[`Table > renders with data correctly 1`] = `
 "<div class="relative overflow-x-auto">
-  <table class="min-w-full table-fixed divide-y divide-[--ui-border-accented]">
+  <table class="min-w-full table-fixed divide-y divide-[var(--ui-border-accented)]">
     <thead class="">
       <tr class="">
-        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Id</th>
-        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Amount</th>
-        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Status</th>
-        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Email</th>
+        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Id</th>
+        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Amount</th>
+        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Status</th>
+        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Email</th>
       </tr>
     </thead>
-    <tbody class="divide-y divide-[--ui-border]">
+    <tbody class="divide-y divide-[var(--ui-border)]">
       <tr class="">
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">m5gr84i9</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">316</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">ken99@yahoo.com</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">m5gr84i9</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">316</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">success</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
       <tr class="">
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">3u1reuv4</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">242</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Abe45@gmail.com</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">3u1reuv4</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">242</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">success</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
       <tr class="">
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">derv1ws0</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">837</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">processing</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Monserrat44@gmail.com</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">derv1ws0</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">837</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">processing</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
       <tr class="">
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">5kma53ae</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">874</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Silas22@gmail.com</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">5kma53ae</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">874</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">success</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
       <tr class="">
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">bhqecj4p</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">721</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">failed</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">carmella@hotmail.com</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">bhqecj4p</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">721</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">failed</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -106,49 +106,49 @@ exports[`Table > renders with data correctly 1`] = `
 
 exports[`Table > renders with ui correctly 1`] = `
 "<div class="relative overflow-x-auto">
-  <table class="min-w-full divide-y divide-[--ui-border-accented] table-auto">
+  <table class="min-w-full divide-y divide-[var(--ui-border-accented)] table-auto">
     <thead class="">
       <tr class="">
-        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Id</th>
-        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Amount</th>
-        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Status</th>
-        <th class="px-4 py-3.5 text-sm text-[--ui-text-highlighted] text-left rtl:text-right font-semibold">Email</th>
+        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Id</th>
+        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Amount</th>
+        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Status</th>
+        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Email</th>
       </tr>
     </thead>
-    <tbody class="divide-y divide-[--ui-border]">
+    <tbody class="divide-y divide-[var(--ui-border)]">
       <tr class="">
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">m5gr84i9</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">316</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">ken99@yahoo.com</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">m5gr84i9</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">316</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">success</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
       <tr class="">
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">3u1reuv4</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">242</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Abe45@gmail.com</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">3u1reuv4</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">242</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">success</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
       <tr class="">
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">derv1ws0</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">837</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">processing</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Monserrat44@gmail.com</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">derv1ws0</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">837</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">processing</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
       <tr class="">
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">5kma53ae</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">874</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">success</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">Silas22@gmail.com</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">5kma53ae</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">874</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">success</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
       <tr class="">
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">bhqecj4p</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">721</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">failed</td>
-        <td class="p-4 text-sm text-[--ui-text-muted] whitespace-nowrap">carmella@hotmail.com</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">bhqecj4p</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">721</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">failed</td>
+        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>

From 3b7a4d9be3ba501a266fc767f4a6d78bd6067f64 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 14 Oct 2024 17:00:40 +0200
Subject: [PATCH 11/26] up

---
 docs/app/pages/[...slug].vue       | 16 +++++++++++++++-
 docs/content/3.components/table.md |  9 ++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/docs/app/pages/[...slug].vue b/docs/app/pages/[...slug].vue
index 877fdb74d0..5eaf2db69d 100644
--- a/docs/app/pages/[...slug].vue
+++ b/docs/app/pages/[...slug].vue
@@ -77,10 +77,24 @@ const communityLinks = computed(() => [{
 
 <template>
   <UPage v-if="page">
-    <UPageHeader :title="page.title" :links="page.links" :headline="headline">
+    <UPageHeader :title="page.title" :headline="headline">
       <template #description>
         <MDC v-if="page.description" :value="page.description" unwrap="p" />
       </template>
+
+      <template #links>
+        <UButton
+          v-for="link in page.links"
+          :key="link.label"
+          color="neutral"
+          variant="outline"
+          v-bind="link"
+        >
+          <template v-if="link.avatar" #leading>
+            <UAvatar v-bind="link.avatar" size="2xs" />
+          </template>
+        </UButton>
+      </template>
     </UPageHeader>
 
     <UPageBody>
diff --git a/docs/content/3.components/table.md b/docs/content/3.components/table.md
index 9e639d3428..1cbd90b85e 100644
--- a/docs/content/3.components/table.md
+++ b/docs/content/3.components/table.md
@@ -1,14 +1,13 @@
 ---
 description: A responsive table element to display data in rows and columns.
 links:
+  - label: TanStack Table
+    avatar:
+      src: https://github.com/tanstack.png
+    to: https://tanstack.com/table/latest
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Table.vue
-navigation:
-  badge:
-    label: Todo
-    color: neutral
-  disabled: true
 ---
 
 ## Usage

From 0b0a4d93b353f0e928899811b4f36f5ed311be97 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 14 Oct 2024 17:07:26 +0200
Subject: [PATCH 12/26] up

---
 src/runtime/components/Table.vue | 39 +++++++++++++++++++-------------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 7be2059757..25886ab917 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -39,22 +39,29 @@ defineSlots<TableSlots<T>>()
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = table()
 
-const sortingState = defineModel<SortingState>('sorting', { default: [] })
+const sortingState = defineModel<SortingState>('sorting', { default: undefined })
 const paginationState = defineModel<PaginationState>('pagination', { default: undefined })
-const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
-const columnVisibilityState = defineModel<VisibilityState>('columnVisibility', { default: {} })
-const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { default: {} })
-const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: {} })
-const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
+const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: undefined })
+const columnVisibilityState = defineModel<VisibilityState>('columnVisibility', { default: undefined })
+const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { default: undefined })
+const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: undefined })
+const expandedState = defineModel<ExpandedState>('expanded', { default: undefined })
 
 const columns = computed<ColumnDef<T>[]>(() => props.columns ?? Object.keys(props.data[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: upperFirst(accessorKey) })))
 
+const definedState = (state: Record<string, Ref>) =>
+  Object.fromEntries(
+    Object.entries(state)
+      .filter(([_, value]) => value.value !== undefined)
+      .map(([key, value]) => [key, value.value])
+  )
+
 const tableApi = useVueTable({
   ...(props.paginationOptions || {}),
   get data() { return props.data },
   get columns() { return columns.value },
   getCoreRowModel: getCoreRowModel(),
-  // getPaginationRowModel: getPaginationRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
   getSortedRowModel: getSortedRowModel(),
   getFilteredRowModel: getFilteredRowModel(),
   getExpandedRowModel: getExpandedRowModel(),
@@ -65,15 +72,15 @@ const tableApi = useVueTable({
   onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelectionState),
   onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expandedState),
   onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinningState),
-  state: {
-    get sorting() { return sortingState.value },
-    // get pagination() { return props.paginationOptions ? paginationState.value : undefined },
-    get columnFilters() { return columnFiltersState.value },
-    get columnVisibility() { return columnVisibilityState.value },
-    get rowSelection() { return rowSelectionState.value },
-    get expanded() { return expandedState.value },
-    get columnPinning() { return columnPinningState.value }
-  }
+  state: definedState({
+    sorting: sortingState,
+    pagination: paginationState,
+    columnFilters: columnFiltersState,
+    columnVisibility: columnVisibilityState,
+    rowSelection: rowSelectionState,
+    expanded: expandedState,
+    columnPinning: columnPinningState
+  })
 })
 
 function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {

From d26a44c0f98f778d683620af6ee0b224c8f13c2c Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 14 Oct 2024 17:23:16 +0200
Subject: [PATCH 13/26] up

---
 src/runtime/components/Table.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 25886ab917..fbbf1203d9 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -39,13 +39,13 @@ defineSlots<TableSlots<T>>()
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = table()
 
-const sortingState = defineModel<SortingState>('sorting', { default: undefined })
+const sortingState = defineModel<SortingState>('sorting', { default: [] })
 const paginationState = defineModel<PaginationState>('pagination', { default: undefined })
-const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: undefined })
-const columnVisibilityState = defineModel<VisibilityState>('columnVisibility', { default: undefined })
-const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { default: undefined })
-const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: undefined })
-const expandedState = defineModel<ExpandedState>('expanded', { default: undefined })
+const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
+const columnVisibilityState = defineModel<VisibilityState>('columnVisibility', { default: {} })
+const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { default: {} })
+const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: {} })
+const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
 
 const columns = computed<ColumnDef<T>[]>(() => props.columns ?? Object.keys(props.data[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: upperFirst(accessorKey) })))
 

From 584dd8dc0a717e139414a27f7892fb24f85604a9 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 15 Oct 2024 13:05:38 +0200
Subject: [PATCH 14/26] up

---
 playground/app/pages/components/table.vue | 44 +++++++++++-----
 src/runtime/components/Table.vue          | 62 ++++++++++++-----------
 2 files changed, 64 insertions(+), 42 deletions(-)

diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
index 3ec5e67546..15a9496bb2 100644
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -2,11 +2,19 @@
 import { h } from 'vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 import { UBadge, UButton, UCheckbox, UDropdownMenu, UTable } from '#components'
-import type { TableColumn } from '@nuxt/ui'
+import type { TableColumn, Table } from '@nuxt/ui'
 
 const toast = useToast()
 
-const data = [{
+type Payment = {
+  id: string
+  date: string
+  status: 'paid' | 'failed' | 'refunded'
+  email: string
+  amount: number
+}
+
+const data: Payment[] = [{
   id: '4600',
   date: '2024-03-11T15:30:00',
   status: 'paid',
@@ -128,7 +136,7 @@ const data = [{
   amount: 567
 }]
 
-const columns: TableColumn<typeof data[number]>[] = [{
+const columns: TableColumn<Payment>[] = [{
   id: 'select',
   header: ({ table }) => h(UCheckbox, {
     'modelValue': table.getIsAllPageRowsSelected(),
@@ -169,8 +177,7 @@ const columns: TableColumn<typeof data[number]>[] = [{
       refunded: 'neutral' as const
     })[row.getValue('status') as string]
 
-    return h(UBadge, {
-      class: 'capitalize', variant: 'subtle', color }, row.getValue('status'))
+    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
   }
 }, {
   accessorKey: 'email',
@@ -209,7 +216,7 @@ const columns: TableColumn<typeof data[number]>[] = [{
       label: 'Actions'
     }, {
       label: 'Copy payment ID',
-      select() {
+      onSelect() {
         navigator.clipboard.writeText(row.original.id)
 
         toast.add({
@@ -220,7 +227,7 @@ const columns: TableColumn<typeof data[number]>[] = [{
       }
     }, {
       label: row.getIsExpanded() ? 'Collapse' : 'Expand',
-      select() {
+      onSelect() {
         row.toggleExpanded()
       }
     }, {
@@ -231,7 +238,7 @@ const columns: TableColumn<typeof data[number]>[] = [{
       label: 'View payment details'
     }]
 
-    return h('div', { class: 'text-right' }, h(UDropdownMenu, {
+    return h('div', { class: 'text-right' }, () => h(UDropdownMenu, {
       content: {
         align: 'end'
       },
@@ -245,16 +252,17 @@ const columns: TableColumn<typeof data[number]>[] = [{
   }
 }]
 
-const table = ref<ComponentExposed<typeof UTable<typeof data[number]>>>()
+const table = ref<Table<Payment>>()
 </script>
 
 <template>
   <div class="h-full flex flex-col flex-1 gap-4 w-full -my-8">
     <div class="flex gap-2 items-center">
       <UInput
+        ref="input"
+        :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
         class="max-w-sm"
         placeholder="Filter emails..."
-        :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
         @update:model-value="table?.tableApi?.getColumn('email')?.setFilterValue($event)"
       />
 
@@ -265,11 +273,23 @@ const table = ref<ComponentExposed<typeof UTable<typeof data[number]>>>()
         label-key="id"
         :content="{ align: 'end' }"
       >
-        <UButton label="Columns" color="neutral" variant="outline" trailing-icon="i-heroicons-chevron-down-20-solid" class="ml-auto" />
+        <UButton
+          label="Columns"
+          color="neutral"
+          variant="outline"
+          trailing-icon="i-heroicons-chevron-down-20-solid"
+          class="ml-auto"
+        />
       </UDropdownMenu>
     </div>
 
-    <UTable ref="table" :pagination="{ pageIndex: 0, pageSize: 20 }" :data="data" :columns="columns" class="border border-[var(--ui-border-accented)] rounded-[var(--ui-radius)] flex-1 overflow-y-auto">
+    <UTable
+      ref="table"
+      :pagination="{ pageIndex: 0, pageSize: 20 }"
+      :data="data"
+      :columns="columns"
+      class="border border-[var(--ui-border-accented)] rounded-[var(--ui-radius)] flex-1 overflow-y-auto"
+    >
       <template #expanded="{ row }">
         <pre>{{ row.original }}</pre>
       </template>
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index fbbf1203d9..66d25e0084 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -1,7 +1,8 @@
+<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
-import type { PaginationOptions, Row, ColumnDef, ColumnFiltersState, ColumnPinningState, ExpandedState, SortingState, PaginationState, RowSelectionState, VisibilityState, Updater } from '@tanstack/vue-table'
+import type { PaginationOptions, Row, ColumnDef, ColumnFiltersState, ColumnPinningState, ExpandedState, SortingState, PaginationState, RowSelectionState, VisibilityState, Updater, Table as TableApi } from '@tanstack/vue-table'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/table'
 
@@ -12,7 +13,7 @@ const table = tv({ extend: tv(theme), ...(appConfig.ui?.table || {}) })
 export type TableColumn<T> = ColumnDef<T>
 
 export interface TableProps<T> {
-  paginationOptions?: Omit<PaginationOptions, 'getPaginationRowModel' | 'onPaginationChange'>
+  // paginationOptions?: Omit<PaginationOptions, 'getPaginationRowModel' | 'onPaginationChange'>
   columns?: TableColumn<T>[]
   data: T[]
   class?: any
@@ -25,10 +26,15 @@ export interface TableSlots<T> {
   expanded(props: { row: Row<T> }): any
   empty(props?: {}): any
 }
+
+export type Table<T> = {
+  tableApi: TableApi<T>
+}
+
 </script>
 
 <script setup lang="ts" generic="T">
-import { computed, type Ref } from 'vue'
+import { ref, computed, type Ref } from 'vue'
 import { FlexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useVueTable } from '@tanstack/vue-table'
 import { upperFirst } from 'scule'
 
@@ -39,9 +45,10 @@ defineSlots<TableSlots<T>>()
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = table()
 
+const globalFilterState = defineModel<string>('globalFilter', { default: undefined })
+const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
 const sortingState = defineModel<SortingState>('sorting', { default: [] })
 const paginationState = defineModel<PaginationState>('pagination', { default: undefined })
-const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
 const columnVisibilityState = defineModel<VisibilityState>('columnVisibility', { default: {} })
 const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { default: {} })
 const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: {} })
@@ -49,45 +56,40 @@ const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
 
 const columns = computed<ColumnDef<T>[]>(() => props.columns ?? Object.keys(props.data[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: upperFirst(accessorKey) })))
 
-const definedState = (state: Record<string, Ref>) =>
-  Object.fromEntries(
-    Object.entries(state)
-      .filter(([_, value]) => value.value !== undefined)
-      .map(([key, value]) => [key, value.value])
-  )
-
 const tableApi = useVueTable({
-  ...(props.paginationOptions || {}),
   get data() { return props.data },
   get columns() { return columns.value },
   getCoreRowModel: getCoreRowModel(),
-  getPaginationRowModel: getPaginationRowModel(),
-  getSortedRowModel: getSortedRowModel(),
   getFilteredRowModel: getFilteredRowModel(),
-  getExpandedRowModel: getExpandedRowModel(),
-  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sortingState),
-  onPaginationChange: updaterOrValue => valueUpdater(updaterOrValue, paginationState),
+  // getPaginationRowModel: getPaginationRowModel()
+  // getSortedRowModel: getSortedRowModel(),
+  // getExpandedRowModel: getExpandedRowModel(),
+  onGlobalFilterChange: updaterOrValue => valueUpdater(updaterOrValue, globalFilterState),
   onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFiltersState),
   onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibilityState),
-  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelectionState),
-  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expandedState),
-  onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinningState),
-  state: definedState({
-    sorting: sortingState,
-    pagination: paginationState,
-    columnFilters: columnFiltersState,
-    columnVisibility: columnVisibilityState,
-    rowSelection: rowSelectionState,
-    expanded: expandedState,
-    columnPinning: columnPinningState
-  })
+  // onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sortingState),
+  // onPaginationChange: updaterOrValue => valueUpdater(updaterOrValue, paginationState),
+  // onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelectionState),
+  // onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expandedState),
+  // onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinningState),
+  state: {
+    get globalFilter() {
+      return globalFilterState.value
+    },
+    get columnFilters() {
+      return columnFiltersState.value
+    },
+    get columnVisibility() {
+      return columnVisibilityState.value
+    }
+  }
 })
 
 function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
   ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
 }
 
-defineExpose({
+defineExpose<Table<T>>({
   tableApi
 })
 </script>

From bf99ba029bf951c2a85169684b011c894ab0397c Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 15 Oct 2024 18:33:00 +0200
Subject: [PATCH 15/26] up

---
 playground/app/pages/components/table.vue | 20 +++++++++++++++-----
 src/runtime/components/Table.vue          | 18 ++++++++----------
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
index 15a9496bb2..7b02f3fac5 100644
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { h } from 'vue'
-import type { ComponentExposed } from 'vue-component-type-helpers'
+import { upperFirst } from 'scule'
 import { UBadge, UButton, UCheckbox, UDropdownMenu, UTable } from '#components'
 import type { TableColumn, Table } from '@nuxt/ui'
 
@@ -14,6 +14,8 @@ type Payment = {
   amount: number
 }
 
+const table = ref<Table<Payment>>()
+
 const data: Payment[] = [{
   id: '4600',
   date: '2024-03-11T15:30:00',
@@ -252,14 +254,23 @@ const columns: TableColumn<Payment>[] = [{
   }
 }]
 
-const table = ref<Table<Payment>>()
+const columnItems = computed(() => table.value?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
+  label: upperFirst(column.id),
+  type: 'checkbox' as const,
+  checked: column.getIsVisible(),
+  onUpdateChecked(checked: boolean) {
+    table.value?.tableApi?.getColumn(column.id)?.toggleVisibility(!!checked)
+  },
+  onSelect(e?: Event) {
+    e?.preventDefault()
+  }
+})))
 </script>
 
 <template>
   <div class="h-full flex flex-col flex-1 gap-4 w-full -my-8">
     <div class="flex gap-2 items-center">
       <UInput
-        ref="input"
         :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
         class="max-w-sm"
         placeholder="Filter emails..."
@@ -267,10 +278,9 @@ const table = ref<Table<Payment>>()
       />
 
       <UDropdownMenu
-        :items="table?.tableApi?.getAllColumns().filter((column) => column.getCanHide())"
+        :items="columnItems"
         placeholder="Columns"
         variant="outline"
-        label-key="id"
         :content="{ align: 'end' }"
       >
         <UButton
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 66d25e0084..c34bd9afe3 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -1,8 +1,9 @@
 <!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv } from 'tailwind-variants'
+import type { ComponentExposed } from 'vue-component-type-helpers'
 import type { AppConfig } from '@nuxt/schema'
-import type { PaginationOptions, Row, ColumnDef, ColumnFiltersState, ColumnPinningState, ExpandedState, SortingState, PaginationState, RowSelectionState, VisibilityState, Updater, Table as TableApi } from '@tanstack/vue-table'
+import type { Row, ColumnDef, ColumnFiltersState, ColumnPinningState, ExpandedState, SortingState, PaginationState, RowSelectionState, VisibilityState, Updater, Table as TableApi } from '@tanstack/vue-table'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/table'
 
@@ -20,8 +21,6 @@ export interface TableProps<T> {
   ui?: Partial<typeof table.slots>
 }
 
-export type TableEmits = {}
-
 export interface TableSlots<T> {
   expanded(props: { row: Row<T> }): any
   empty(props?: {}): any
@@ -33,13 +32,12 @@ export type Table<T> = {
 
 </script>
 
-<script setup lang="ts" generic="T">
+<script setup lang="ts" generic="T extends object">
 import { ref, computed, type Ref } from 'vue'
 import { FlexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useVueTable } from '@tanstack/vue-table'
 import { upperFirst } from 'scule'
 
 const props = defineProps<TableProps<T>>()
-defineEmits<TableEmits>()
 defineSlots<TableSlots<T>>()
 
 // eslint-disable-next-line vue/no-dupe-keys
@@ -47,12 +45,12 @@ const ui = table()
 
 const globalFilterState = defineModel<string>('globalFilter', { default: undefined })
 const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
-const sortingState = defineModel<SortingState>('sorting', { default: [] })
-const paginationState = defineModel<PaginationState>('pagination', { default: undefined })
 const columnVisibilityState = defineModel<VisibilityState>('columnVisibility', { default: {} })
-const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { default: {} })
-const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: {} })
-const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
+// const sortingState = defineModel<SortingState>('sorting', { default: [] })
+// const paginationState = defineModel<PaginationState>('pagination', { default: undefined })
+// const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { default: {} })
+// const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: {} })
+// const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
 
 const columns = computed<ColumnDef<T>[]>(() => props.columns ?? Object.keys(props.data[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: upperFirst(accessorKey) })))
 

From daa840535660a1803f4692b9ee17d355f1cf340c Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 16 Oct 2024 12:58:00 +0200
Subject: [PATCH 16/26] up

---
 docs/content/3.components/carousel.md     |  4 ---
 docs/content/3.components/table.md        | 16 ++++++---
 playground/app/pages/components/table.vue | 33 ++++++++----------
 src/runtime/components/Table.vue          | 41 +++++++++++++++++------
 4 files changed, 56 insertions(+), 38 deletions(-)

diff --git a/docs/content/3.components/carousel.md b/docs/content/3.components/carousel.md
index ecef5b16bd..d84aa74067 100644
--- a/docs/content/3.components/carousel.md
+++ b/docs/content/3.components/carousel.md
@@ -276,10 +276,6 @@ This will give you access to the following:
 | `emblaRef`{lang="ts-type"} | `Ref<HTMLElement \| null>`{lang="ts-type"} |
 | `emblaApi`{lang="ts-type"} | [`Ref<EmblaCarouselType \| null>`{lang="ts-type"}](https://www.embla-carousel.com/api/methods/#typescript) |
 
-::note{to="https://vuejs.org/api/composition-api-helpers.html#usetemplateref" target="_blank"}
-You can use `useTemplateRef` to get the component instance.
-::
-
 ## Theme
 
 :component-theme
diff --git a/docs/content/3.components/table.md b/docs/content/3.components/table.md
index 1cbd90b85e..0f8eeac99f 100644
--- a/docs/content/3.components/table.md
+++ b/docs/content/3.components/table.md
@@ -24,13 +24,21 @@ links:
 
 :component-slots
 
-### Emits
+### Expose
 
-:component-emits
+You can access the typed component instance using [`useTemplateRef`](https://vuejs.org/api/composition-api-helpers.html#usetemplateref).
 
-### Expose
+```vue
+<script setup lang="ts">
+const table = useTemplateRef('table')
+</script>
+
+<template>
+  <UTable ref="table" />
+</template>
+```
 
-When accessing the component via a template ref, you can use the following:
+This will give you access to the following:
 
 | Name | Type |
 | ---- | ---- |
diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
index 7b02f3fac5..10c9e8df92 100644
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -2,7 +2,7 @@
 import { h } from 'vue'
 import { upperFirst } from 'scule'
 import { UBadge, UButton, UCheckbox, UDropdownMenu, UTable } from '#components'
-import type { TableColumn, Table } from '@nuxt/ui'
+import type { TableColumn } from '@nuxt/ui'
 
 const toast = useToast()
 
@@ -14,7 +14,7 @@ type Payment = {
   amount: number
 }
 
-const table = ref<Table<Payment>>()
+const table = useTemplateRef('table')
 
 const data: Payment[] = [{
   id: '4600',
@@ -240,7 +240,7 @@ const columns: TableColumn<Payment>[] = [{
       label: 'View payment details'
     }]
 
-    return h('div', { class: 'text-right' }, () => h(UDropdownMenu, {
+    return h('div', { class: 'text-right' }, h(UDropdownMenu, {
       content: {
         align: 'end'
       },
@@ -253,18 +253,6 @@ const columns: TableColumn<Payment>[] = [{
     })))
   }
 }]
-
-const columnItems = computed(() => table.value?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
-  label: upperFirst(column.id),
-  type: 'checkbox' as const,
-  checked: column.getIsVisible(),
-  onUpdateChecked(checked: boolean) {
-    table.value?.tableApi?.getColumn(column.id)?.toggleVisibility(!!checked)
-  },
-  onSelect(e?: Event) {
-    e?.preventDefault()
-  }
-})))
 </script>
 
 <template>
@@ -278,9 +266,17 @@ const columnItems = computed(() => table.value?.tableApi?.getAllColumns().filter
       />
 
       <UDropdownMenu
-        :items="columnItems"
-        placeholder="Columns"
-        variant="outline"
+        :items="table?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
+          label: upperFirst(column.id),
+          type: 'checkbox' as const,
+          checked: column.getIsVisible(),
+          onUpdateChecked(checked: boolean) {
+            table?.tableApi?.getColumn(column.id)?.toggleVisibility(!!checked)
+          },
+          onSelect(e?: Event) {
+            e?.preventDefault()
+          }
+        }))"
         :content="{ align: 'end' }"
       >
         <UButton
@@ -295,7 +291,6 @@ const columnItems = computed(() => table.value?.tableApi?.getAllColumns().filter
 
     <UTable
       ref="table"
-      :pagination="{ pageIndex: 0, pageSize: 20 }"
       :data="data"
       :columns="columns"
       class="border border-[var(--ui-border-accented)] rounded-[var(--ui-radius)] flex-1 overflow-y-auto"
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index c34bd9afe3..c59c7ff8a2 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -1,9 +1,21 @@
 <!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
+import type { Ref } from 'vue'
 import { tv } from 'tailwind-variants'
-import type { ComponentExposed } from 'vue-component-type-helpers'
 import type { AppConfig } from '@nuxt/schema'
-import type { Row, ColumnDef, ColumnFiltersState, ColumnPinningState, ExpandedState, SortingState, PaginationState, RowSelectionState, VisibilityState, Updater, Table as TableApi } from '@tanstack/vue-table'
+import type {
+  Row,
+  ColumnDef,
+  ColumnFiltersState,
+  // ColumnPinningState,
+  // ExpandedState,
+  // SortingState,
+  // PaginationState,
+  // RowSelectionState,
+  VisibilityState,
+  Updater
+  // Table as TableApi
+} from '@tanstack/vue-table'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/table'
 
@@ -12,6 +24,9 @@ const appConfig = _appConfig as AppConfig & { ui: { table: Partial<typeof theme>
 const table = tv({ extend: tv(theme), ...(appConfig.ui?.table || {}) })
 
 export type TableColumn<T> = ColumnDef<T>
+export interface TableData {
+  [key: string]: any
+}
 
 export interface TableProps<T> {
   // paginationOptions?: Omit<PaginationOptions, 'getPaginationRowModel' | 'onPaginationChange'>
@@ -26,15 +41,19 @@ export interface TableSlots<T> {
   empty(props?: {}): any
 }
 
-export type Table<T> = {
-  tableApi: TableApi<T>
-}
-
 </script>
 
-<script setup lang="ts" generic="T extends object">
-import { ref, computed, type Ref } from 'vue'
-import { FlexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useVueTable } from '@tanstack/vue-table'
+<script setup lang="ts" generic="T extends TableData">
+import { computed } from 'vue'
+import {
+  FlexRender,
+  getCoreRowModel,
+  // getExpandedRowModel,
+  getFilteredRowModel,
+  // getPaginationRowModel,
+  // getSortedRowModel,
+  useVueTable
+} from '@tanstack/vue-table'
 import { upperFirst } from 'scule'
 
 const props = defineProps<TableProps<T>>()
@@ -52,7 +71,7 @@ const columnVisibilityState = defineModel<VisibilityState>('columnVisibility', {
 // const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: {} })
 // const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
 
-const columns = computed<ColumnDef<T>[]>(() => props.columns ?? Object.keys(props.data[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: upperFirst(accessorKey) })))
+const columns = computed<TableColumn<T>[]>(() => props.columns ?? Object.keys(props.data[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: upperFirst(accessorKey) })))
 
 const tableApi = useVueTable({
   get data() { return props.data },
@@ -87,7 +106,7 @@ function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
   ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
 }
 
-defineExpose<Table<T>>({
+defineExpose({
   tableApi
 })
 </script>

From 900480d96de4ad39bb6403745c394410339ffd46 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 16 Oct 2024 17:13:43 +0200
Subject: [PATCH 17/26] up

---
 playground/app/pages/components/table.vue | 12 ++++---
 src/runtime/components/Table.vue          | 41 ++++++++++++++---------
 2 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
index 10c9e8df92..61b9de5fd4 100644
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
-import { h } from 'vue'
+import { h, resolveComponent } from 'vue'
 import { upperFirst } from 'scule'
-import { UBadge, UButton, UCheckbox, UDropdownMenu, UTable } from '#components'
 import type { TableColumn } from '@nuxt/ui'
 
+const UButton = resolveComponent('UButton')
+const UCheckbox = resolveComponent('UCheckbox')
+const UBadge = resolveComponent('UBadge')
+const UDropdownMenu = resolveComponent('UDropdownMenu')
+
 const toast = useToast()
 
 type Payment = {
@@ -306,7 +310,7 @@ const columns: TableColumn<Payment>[] = [{
         {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
       </div>
 
-      <div class="flex items-center gap-1.5">
+      <!-- <div class="flex items-center gap-1.5">
         <UButton
           color="neutral"
           variant="outline"
@@ -323,7 +327,7 @@ const columns: TableColumn<Payment>[] = [{
         >
           Next
         </UButton>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index c59c7ff8a2..3bd21f4207 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -8,11 +8,11 @@ import type {
   ColumnDef,
   ColumnFiltersState,
   // ColumnPinningState,
-  // ExpandedState,
-  // SortingState,
-  // PaginationState,
-  // RowSelectionState,
+  RowSelectionState,
+  SortingState,
+  ExpandedState,
   VisibilityState,
+  // PaginationState,
   Updater
   // Table as TableApi
 } from '@tanstack/vue-table'
@@ -48,10 +48,10 @@ import { computed } from 'vue'
 import {
   FlexRender,
   getCoreRowModel,
-  // getExpandedRowModel,
+  getExpandedRowModel,
   getFilteredRowModel,
   // getPaginationRowModel,
-  // getSortedRowModel,
+  getSortedRowModel,
   useVueTable
 } from '@tanstack/vue-table'
 import { upperFirst } from 'scule'
@@ -65,11 +65,11 @@ const ui = table()
 const globalFilterState = defineModel<string>('globalFilter', { default: undefined })
 const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
 const columnVisibilityState = defineModel<VisibilityState>('columnVisibility', { default: {} })
-// const sortingState = defineModel<SortingState>('sorting', { default: [] })
-// const paginationState = defineModel<PaginationState>('pagination', { default: undefined })
 // const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { default: {} })
-// const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: {} })
-// const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
+const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: {} })
+const sortingState = defineModel<SortingState>('sorting', { default: [] })
+const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
+// const paginationState = defineModel<PaginationState>('pagination', { default: undefined })
 
 const columns = computed<TableColumn<T>[]>(() => props.columns ?? Object.keys(props.data[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: upperFirst(accessorKey) })))
 
@@ -79,16 +79,16 @@ const tableApi = useVueTable({
   getCoreRowModel: getCoreRowModel(),
   getFilteredRowModel: getFilteredRowModel(),
   // getPaginationRowModel: getPaginationRowModel()
-  // getSortedRowModel: getSortedRowModel(),
-  // getExpandedRowModel: getExpandedRowModel(),
+  getSortedRowModel: getSortedRowModel(),
+  getExpandedRowModel: getExpandedRowModel(),
   onGlobalFilterChange: updaterOrValue => valueUpdater(updaterOrValue, globalFilterState),
   onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFiltersState),
   onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibilityState),
-  // onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sortingState),
-  // onPaginationChange: updaterOrValue => valueUpdater(updaterOrValue, paginationState),
-  // onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelectionState),
-  // onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expandedState),
   // onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinningState),
+  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelectionState),
+  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sortingState),
+  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expandedState),
+  // onPaginationChange: updaterOrValue => valueUpdater(updaterOrValue, paginationState),
   state: {
     get globalFilter() {
       return globalFilterState.value
@@ -98,6 +98,15 @@ const tableApi = useVueTable({
     },
     get columnVisibility() {
       return columnVisibilityState.value
+    },
+    get expanded() {
+      return expandedState.value
+    },
+    get rowSelection() {
+      return rowSelectionState.value
+    },
+    get sorting() {
+      return sortingState.value
     }
   }
 })

From 470d9d60d1b41f44659aa17de31c999d20610932 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 17 Oct 2024 15:43:13 +0200
Subject: [PATCH 18/26] up

---
 playground/app/pages/components/table.vue     |   6 +
 src/runtime/components/Table.vue              |  30 +-
 src/theme/table.ts                            |  14 +-
 test/components/Table.spec.ts                 | 113 ++++++-
 .../__snapshots__/Table.spec.ts.snap          | 318 +++++++++++++-----
 5 files changed, 375 insertions(+), 106 deletions(-)

diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
index 61b9de5fd4..8477478d22 100644
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -257,6 +257,11 @@ const columns: TableColumn<Payment>[] = [{
     })))
   }
 }]
+
+const columnPinning = ref({
+  left: ['id'],
+  right: ['actions']
+})
 </script>
 
 <template>
@@ -297,6 +302,7 @@ const columns: TableColumn<Payment>[] = [{
       ref="table"
       :data="data"
       :columns="columns"
+      :column-pinning="columnPinning"
       class="border border-[var(--ui-border-accented)] rounded-[var(--ui-radius)] flex-1 overflow-y-auto"
     >
       <template #expanded="{ row }">
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 3bd21f4207..55f072b0c3 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -7,14 +7,12 @@ import type {
   Row,
   ColumnDef,
   ColumnFiltersState,
-  // ColumnPinningState,
+  ColumnPinningState,
   RowSelectionState,
   SortingState,
   ExpandedState,
   VisibilityState,
-  // PaginationState,
   Updater
-  // Table as TableApi
 } from '@tanstack/vue-table'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/table'
@@ -29,7 +27,6 @@ export interface TableData {
 }
 
 export interface TableProps<T> {
-  // paginationOptions?: Omit<PaginationOptions, 'getPaginationRowModel' | 'onPaginationChange'>
   columns?: TableColumn<T>[]
   data: T[]
   class?: any
@@ -50,7 +47,6 @@ import {
   getCoreRowModel,
   getExpandedRowModel,
   getFilteredRowModel,
-  // getPaginationRowModel,
   getSortedRowModel,
   useVueTable
 } from '@tanstack/vue-table'
@@ -65,11 +61,10 @@ const ui = table()
 const globalFilterState = defineModel<string>('globalFilter', { default: undefined })
 const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
 const columnVisibilityState = defineModel<VisibilityState>('columnVisibility', { default: {} })
-// const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { default: {} })
+const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { default: {} })
 const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: {} })
 const sortingState = defineModel<SortingState>('sorting', { default: [] })
 const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
-// const paginationState = defineModel<PaginationState>('pagination', { default: undefined })
 
 const columns = computed<TableColumn<T>[]>(() => props.columns ?? Object.keys(props.data[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: upperFirst(accessorKey) })))
 
@@ -78,17 +73,15 @@ const tableApi = useVueTable({
   get columns() { return columns.value },
   getCoreRowModel: getCoreRowModel(),
   getFilteredRowModel: getFilteredRowModel(),
-  // getPaginationRowModel: getPaginationRowModel()
   getSortedRowModel: getSortedRowModel(),
   getExpandedRowModel: getExpandedRowModel(),
   onGlobalFilterChange: updaterOrValue => valueUpdater(updaterOrValue, globalFilterState),
   onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFiltersState),
   onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibilityState),
-  // onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinningState),
+  onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinningState),
   onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelectionState),
   onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sortingState),
   onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expandedState),
-  // onPaginationChange: updaterOrValue => valueUpdater(updaterOrValue, paginationState),
   state: {
     get globalFilter() {
       return globalFilterState.value
@@ -99,6 +92,9 @@ const tableApi = useVueTable({
     get columnVisibility() {
       return columnVisibilityState.value
     },
+    get columnPinning() {
+      return columnPinningState.value
+    },
     get expanded() {
       return expandedState.value
     },
@@ -125,7 +121,12 @@ defineExpose({
     <table :class="ui.base({ class: [props.ui?.base] })">
       <thead :class="ui.thead({ class: [props.ui?.thead] })">
         <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })">
-          <th v-for="header in headerGroup.headers" :key="header.id" :class="ui.th({ class: [props.ui?.th] })">
+          <th
+            v-for="header in headerGroup.headers"
+            :key="header.id"
+            :data-pinned="header.column.getIsPinned()"
+            :class="ui.th({ class: [props.ui?.th], pinned: !!header.column.getIsPinned() })"
+          >
             <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
           </th>
         </tr>
@@ -135,7 +136,12 @@ defineExpose({
         <template v-if="tableApi.getRowModel().rows?.length">
           <template v-for="row in tableApi.getRowModel().rows" :key="row.id">
             <tr :data-state="row.getIsSelected() ? 'selected' : undefined" :class="ui.tr({ class: [props.ui?.tr] })">
-              <td v-for="cell in row.getVisibleCells()" :key="cell.id" :class="ui.td({ class: [props.ui?.td] })">
+              <td
+                v-for="cell in row.getVisibleCells()"
+                :key="cell.id"
+                :data-pinned="cell.column.getIsPinned()"
+                :class="ui.td({ class: [props.ui?.td], pinned: !!cell.column.getIsPinned() })"
+              >
                 <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
               </td>
             </tr>
diff --git a/src/theme/table.ts b/src/theme/table.ts
index 22515adb2a..2788e4760b 100644
--- a/src/theme/table.ts
+++ b/src/theme/table.ts
@@ -4,9 +4,17 @@ export default {
     base: 'min-w-full table-fixed divide-y divide-[var(--ui-border-accented)]',
     thead: '',
     tbody: 'divide-y divide-[var(--ui-border)]',
-    tr: '',
-    th: 'px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold',
-    td: 'p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap',
+    tr: 'data-[state=selected]:bg-[var(--ui-bg-elevated)]/50',
+    th: 'px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0',
+    td: 'p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0',
     empty: 'h-24 text-center'
+  },
+  variants: {
+    pinned: {
+      true: {
+        th: 'sticky bg-[var(--ui-bg)]/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0',
+        td: 'sticky bg-[var(--ui-bg)]/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0'
+      }
+    }
   }
 }
diff --git a/test/components/Table.spec.ts b/test/components/Table.spec.ts
index 026561e5bb..9c2e4c8e7b 100644
--- a/test/components/Table.spec.ts
+++ b/test/components/Table.spec.ts
@@ -1,8 +1,14 @@
+import { h, resolveComponent } from 'vue'
 import { describe, it, expect } from 'vitest'
-import Table, { type TableProps, type TableSlots } from '../../src/runtime/components/Table.vue'
+import Table, { type TableProps, type TableSlots, type TableColumn } from '../../src/runtime/components/Table.vue'
 import ComponentRender from '../component-render'
 
 describe('Table', () => {
+  const UButton = resolveComponent('UButton')
+  const UCheckbox = resolveComponent('UCheckbox')
+  const UBadge = resolveComponent('UBadge')
+  const UDropdownMenu = resolveComponent('UDropdownMenu')
+
   const data = [{
     id: 'm5gr84i9',
     amount: 316,
@@ -30,11 +36,116 @@ describe('Table', () => {
     email: 'carmella@hotmail.com'
   }]
 
+  const columns: TableColumn<typeof data[number]>[] = [{
+    id: 'select',
+    header: ({ table }) => h(UCheckbox, {
+      'modelValue': table.getIsAllPageRowsSelected(),
+      'indeterminate': table.getIsSomePageRowsSelected(),
+      'onUpdate:modelValue': (value: boolean) => table.toggleAllPageRowsSelected(!!value),
+      'ariaLabel': 'Select all'
+    }),
+    cell: ({ row }) => h(UCheckbox, {
+      'modelValue': row.getIsSelected(),
+      'onUpdate:modelValue': (value: boolean) => row.toggleSelected(!!value),
+      'ariaLabel': 'Select row'
+    }),
+    enableSorting: false,
+    enableHiding: false
+  }, {
+    accessorKey: 'id',
+    header: '#',
+    cell: ({ row }) => `#${row.getValue('id')}`
+  }, {
+    accessorKey: 'date',
+    header: 'Date',
+    cell: ({ row }) => {
+      return new Date(row.getValue('date')).toLocaleString('en-US', {
+        day: 'numeric',
+        month: 'short',
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false
+      })
+    }
+  }, {
+    accessorKey: 'status',
+    header: 'Status',
+    cell: ({ row }) => {
+      const color = ({
+        paid: 'success' as const,
+        failed: 'error' as const,
+        refunded: 'neutral' as const
+      })[row.getValue('status') as string]
+
+      return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
+    }
+  }, {
+    accessorKey: 'email',
+    header: ({ column }) => {
+      const isSorted = column.getIsSorted()
+
+      return h(UButton, {
+        color: 'neutral',
+        variant: 'ghost',
+        label: 'Email',
+        icon: isSorted ? (isSorted === 'asc' ? 'i-heroicons-bars-arrow-up-20-solid' : 'i-heroicons-bars-arrow-down-20-solid') : 'i-heroicons-arrows-up-down-20-solid',
+        class: '-mx-2.5',
+        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
+      })
+    },
+    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email'))
+  }, {
+    accessorKey: 'amount',
+    header: () => h('div', { class: 'text-right' }, 'Amount'),
+    cell: ({ row }) => {
+      const amount = Number.parseFloat(row.getValue('amount'))
+
+      const formatted = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'EUR'
+      }).format(amount)
+
+      return h('div', { class: 'text-right font-medium' }, formatted)
+    }
+  }, {
+    id: 'actions',
+    enableHiding: false,
+    cell: ({ row }) => {
+      const items = [{
+        type: 'label',
+        label: 'Actions'
+      }, {
+        label: 'Copy payment ID'
+      }, {
+        label: row.getIsExpanded() ? 'Collapse' : 'Expand'
+      }, {
+        type: 'separator'
+      }, {
+        label: 'View customer'
+      }, {
+        label: 'View payment details'
+      }]
+
+      return h('div', { class: 'text-right' }, h(UDropdownMenu, {
+        content: {
+          align: 'end'
+        },
+        items
+      }, () => h(UButton, {
+        icon: 'i-heroicons-ellipsis-vertical-20-solid',
+        color: 'neutral',
+        variant: 'ghost',
+        class: 'ml-auto'
+      })))
+    }
+  }]
+
   const props = { data }
 
   it.each([
     // Props
     ['with data', { props }],
+    ['with columns', { props: { ...props, columns } }],
     ['with class', { props: { ...props, class: 'absolute' } }],
     ['with ui', { props: { ...props, ui: { base: 'table-auto' } } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: TableProps<typeof data[number]>, slots?: Partial<TableSlots<typeof data[number]>> }) => {
diff --git a/test/components/__snapshots__/Table.spec.ts.snap b/test/components/__snapshots__/Table.spec.ts.snap
index d1a3eadce5..77456c3324 100644
--- a/test/components/__snapshots__/Table.spec.ts.snap
+++ b/test/components/__snapshots__/Table.spec.ts.snap
@@ -4,47 +4,185 @@ exports[`Table > renders with class correctly 1`] = `
 "<div class="overflow-x-auto absolute">
   <table class="min-w-full table-fixed divide-y divide-[var(--ui-border-accented)]">
     <thead class="">
-      <tr class="">
-        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Id</th>
-        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Amount</th>
-        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Status</th>
-        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Email</th>
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Email</th>
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="">
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">m5gr84i9</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">316</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">success</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">ken99@yahoo.com</td>
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr class="">
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">3u1reuv4</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">242</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">success</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">Abe45@gmail.com</td>
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="">
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">derv1ws0</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">837</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">processing</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">Monserrat44@gmail.com</td>
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="">
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">5kma53ae</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">874</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">success</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">Silas22@gmail.com</td>
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="">
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">bhqecj4p</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">721</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">failed</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">carmella@hotmail.com</td>
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">carmella@hotmail.com</td>
+      </tr>
+      <!--v-if-->
+    </tbody>
+  </table>
+</div>"
+`;
+
+exports[`Table > renders with columns correctly 1`] = `
+"<div class="relative overflow-x-auto">
+  <table class="min-w-full table-fixed divide-y divide-[var(--ui-border-accented)]">
+    <thead class="">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">
+          <ucheckbox modelvalue="false" indeterminate="false" arialabel="Select all"></ucheckbox>
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">#</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Date</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">
+          <ubutton color="neutral" variant="ghost" label="Email" icon="i-heroicons-arrows-up-down-20-solid" class="-mx-2.5"></ubutton>
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">
+          <div class="text-right">Amount</div>
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">
+          <!---->
+        </th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-[var(--ui-border)]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <ucheckbox modelvalue="false" arialabel="Select row"></ucheckbox>
+        </td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">#m5gr84i9</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Invalid Date</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <ubadge class="capitalize" variant="subtle"></ubadge>
+        </td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <div class="lowercase">ken99@yahoo.com</div>
+        </td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <div class="text-right font-medium">€316.00</div>
+        </td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <div class="text-right">
+            <udropdownmenu content="[object Object]" items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"></udropdownmenu>
+          </div>
+        </td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <ucheckbox modelvalue="false" arialabel="Select row"></ucheckbox>
+        </td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">#3u1reuv4</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Invalid Date</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <ubadge class="capitalize" variant="subtle"></ubadge>
+        </td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <div class="lowercase">Abe45@gmail.com</div>
+        </td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <div class="text-right font-medium">€242.00</div>
+        </td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <div class="text-right">
+            <udropdownmenu content="[object Object]" items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"></udropdownmenu>
+          </div>
+        </td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <ucheckbox modelvalue="false" arialabel="Select row"></ucheckbox>
+        </td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">#derv1ws0</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Invalid Date</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <ubadge class="capitalize" variant="subtle"></ubadge>
+        </td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <div class="lowercase">Monserrat44@gmail.com</div>
+        </td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <div class="text-right font-medium">€837.00</div>
+        </td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <div class="text-right">
+            <udropdownmenu content="[object Object]" items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"></udropdownmenu>
+          </div>
+        </td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <ucheckbox modelvalue="false" arialabel="Select row"></ucheckbox>
+        </td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">#5kma53ae</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Invalid Date</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <ubadge class="capitalize" variant="subtle"></ubadge>
+        </td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <div class="lowercase">Silas22@gmail.com</div>
+        </td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <div class="text-right font-medium">€874.00</div>
+        </td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <div class="text-right">
+            <udropdownmenu content="[object Object]" items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"></udropdownmenu>
+          </div>
+        </td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <ucheckbox modelvalue="false" arialabel="Select row"></ucheckbox>
+        </td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">#bhqecj4p</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Invalid Date</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <ubadge class="capitalize" variant="subtle" color="error"></ubadge>
+        </td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <div class="lowercase">carmella@hotmail.com</div>
+        </td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <div class="text-right font-medium">€721.00</div>
+        </td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
+          <div class="text-right">
+            <udropdownmenu content="[object Object]" items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"></udropdownmenu>
+          </div>
+        </td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -56,47 +194,47 @@ exports[`Table > renders with data correctly 1`] = `
 "<div class="relative overflow-x-auto">
   <table class="min-w-full table-fixed divide-y divide-[var(--ui-border-accented)]">
     <thead class="">
-      <tr class="">
-        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Id</th>
-        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Amount</th>
-        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Status</th>
-        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Email</th>
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Email</th>
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="">
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">m5gr84i9</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">316</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">success</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">ken99@yahoo.com</td>
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr class="">
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">3u1reuv4</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">242</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">success</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">Abe45@gmail.com</td>
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="">
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">derv1ws0</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">837</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">processing</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">Monserrat44@gmail.com</td>
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="">
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">5kma53ae</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">874</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">success</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">Silas22@gmail.com</td>
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="">
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">bhqecj4p</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">721</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">failed</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">carmella@hotmail.com</td>
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>
@@ -108,47 +246,47 @@ exports[`Table > renders with ui correctly 1`] = `
 "<div class="relative overflow-x-auto">
   <table class="min-w-full divide-y divide-[var(--ui-border-accented)] table-auto">
     <thead class="">
-      <tr class="">
-        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Id</th>
-        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Amount</th>
-        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Status</th>
-        <th class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold">Email</th>
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Email</th>
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="">
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">m5gr84i9</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">316</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">success</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">ken99@yahoo.com</td>
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr class="">
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">3u1reuv4</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">242</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">success</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">Abe45@gmail.com</td>
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="">
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">derv1ws0</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">837</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">processing</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">Monserrat44@gmail.com</td>
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="">
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">5kma53ae</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">874</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">success</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">Silas22@gmail.com</td>
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="">
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">bhqecj4p</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">721</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">failed</td>
-        <td class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap">carmella@hotmail.com</td>
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">carmella@hotmail.com</td>
       </tr>
       <!--v-if-->
     </tbody>

From cfebdf638e29d21ab47115813159a6a440cb8476 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 22 Oct 2024 15:50:48 +0200
Subject: [PATCH 19/26] up

---
 .../examples/table/TableColumnsExample.vue    |  96 +++
 docs/content/3.components/table.md            | 166 +++++
 docs/nuxt.config.ts                           |   1 +
 playground/app/pages/components/table.vue     |  21 +-
 src/runtime/components/Table.vue              |  54 +-
 src/theme/table.ts                            |  73 +-
 test/components/Table.spec.ts                 |   8 +
 .../__snapshots__/Table.spec.ts.snap          | 700 +++++++++++++++++-
 8 files changed, 1072 insertions(+), 47 deletions(-)
 create mode 100644 docs/app/components/content/examples/table/TableColumnsExample.vue

diff --git a/docs/app/components/content/examples/table/TableColumnsExample.vue b/docs/app/components/content/examples/table/TableColumnsExample.vue
new file mode 100644
index 0000000000..0023368e1a
--- /dev/null
+++ b/docs/app/components/content/examples/table/TableColumnsExample.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { h, resolveComponent } from 'vue'
+import type { TableColumn } from '@nuxt/ui'
+
+const UBadge = resolveComponent('UBadge')
+
+type Payment = {
+  id: string
+  date: string
+  status: 'paid' | 'failed' | 'refunded'
+  email: string
+  amount: number
+}
+
+const data = ref<Payment[]>([{
+  id: '4600',
+  date: '2024-03-11T15:30:00',
+  status: 'paid',
+  email: 'james.anderson@example.com',
+  amount: 594
+}, {
+  id: '4599',
+  date: '2024-03-11T10:10:00',
+  status: 'failed',
+  email: 'mia.white@example.com',
+  amount: 276
+}, {
+  id: '4598',
+  date: '2024-03-11T08:50:00',
+  status: 'refunded',
+  email: 'william.brown@example.com',
+  amount: 315
+}, {
+  id: '4597',
+  date: '2024-03-10T19:45:00',
+  status: 'paid',
+  email: 'emma.davis@example.com',
+  amount: 529
+}, {
+  id: '4596',
+  date: '2024-03-10T15:55:00',
+  status: 'paid',
+  email: 'ethan.harris@example.com',
+  amount: 639
+}])
+
+const columns: TableColumn<Payment>[] = [{
+  accessorKey: 'id',
+  header: '#',
+  cell: ({ row }) => `#${row.getValue('id')}`
+}, {
+  accessorKey: 'date',
+  header: 'Date',
+  cell: ({ row }) => {
+    return new Date(row.getValue('date')).toLocaleString('en-US', {
+      day: 'numeric',
+      month: 'short',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    })
+  }
+}, {
+  accessorKey: 'status',
+  header: 'Status',
+  cell: ({ row }) => {
+    const color = ({
+      paid: 'success' as const,
+      failed: 'error' as const,
+      refunded: 'neutral' as const
+    })[row.getValue('status') as string]
+
+    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
+  }
+}, {
+  accessorKey: 'email',
+  header: 'Email'
+}, {
+  accessorKey: 'amount',
+  header: () => h('div', { class: 'text-right' }, 'Amount'),
+  cell: ({ row }) => {
+    const amount = Number.parseFloat(row.getValue('amount'))
+
+    const formatted = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'EUR'
+    }).format(amount)
+
+    return h('div', { class: 'text-right font-medium' }, formatted)
+  }
+}]
+</script>
+
+<template>
+  <UTable :data="data" :columns="columns" class="flex-1" />
+</template>
diff --git a/docs/content/3.components/table.md b/docs/content/3.components/table.md
index 0f8eeac99f..cf90a2db99 100644
--- a/docs/content/3.components/table.md
+++ b/docs/content/3.components/table.md
@@ -12,6 +12,172 @@ links:
 
 ## Usage
 
+### Data
+
+Use the `data` prop as an array of objects, the columns will be generated based on the keys of the objects.
+
+::component-code
+---
+collapse: true
+class: '!p-0'
+ignore:
+  - data
+  - class
+external:
+  - data
+props:
+  data:
+    - id: '4600'
+      date: '2024-03-11T15:30:00'
+      status: 'paid'
+      email: 'james.anderson@example.com'
+      amount: 594
+    - id: '4599'
+      date: '2024-03-11T10:10:00'
+      status: 'failed'
+      email: 'mia.white@example.com'
+      amount: 276
+    - id: '4598'
+      date: '2024-03-11T08:50:00'
+      status: 'refunded'
+      email: 'william.brown@example.com'
+      amount: 315
+    - id: '4597'
+      date: '2024-03-10T19:45:00'
+      status: 'paid'
+      email: 'emma.davis@example.com'
+      amount: 529
+    - id: '4596'
+      date: '2024-03-10T15:55:00'
+      status: 'paid'
+      email: 'ethan.harris@example.com'
+      amount: 639
+  class: 'flex-1'
+---
+::
+
+### Columns
+
+Use the `columns` prop as an array of objects with the following properties:
+
+- `accessorKey`: The key of the column.
+- `header`: The header of the column.
+- `footer`: The footer of the column.
+
+::component-example
+---
+collapse: true
+class: '!p-0'
+name: 'table-columns-example'
+---
+::
+
+::note{to="https://tanstack.com/table/latest/docs/guide/column-defs" target="_blank"}
+For more information on columns, see the [TanStack Table documentation](https://tanstack.com/table/latest/docs/guide/column-defs).
+::
+
+### Sticky
+
+Use the `sticky` prop to make the header sticky.
+
+::component-code
+---
+collapse: true
+class: '!p-0'
+ignore:
+  - data
+  - class
+external:
+  - data
+props:
+  sticky: true
+  data:
+    - id: '4600'
+      date: '2024-03-11T15:30:00'
+      status: 'paid'
+      email: 'james.anderson@example.com'
+      amount: 594
+    - id: '4599'
+      date: '2024-03-11T10:10:00'
+      status: 'failed'
+      email: 'mia.white@example.com'
+      amount: 276
+    - id: '4598'
+      date: '2024-03-11T08:50:00'
+      status: 'refunded'
+      email: 'william.brown@example.com'
+      amount: 315
+    - id: '4597'
+      date: '2024-03-10T19:45:00'
+      status: 'paid'
+      email: 'emma.davis@example.com'
+      amount: 529
+    - id: '4596'
+      date: '2024-03-10T15:55:00'
+      status: 'paid'
+      email: 'ethan.harris@example.com'
+      amount: 639
+    - id: '4595'
+      date: '2024-03-10T15:55:00'
+      status: 'paid'
+      email: 'ethan.harris@example.com'
+      amount: 639
+    - id: '4594'
+      date: '2024-03-10T15:55:00'
+      status: 'paid'
+      email: 'ethan.harris@example.com'
+      amount: 639
+  class: 'flex-1 max-h-[312px]'
+---
+::
+
+### Loading
+
+Use the `loading` prop to display a loading state, the `loading-color` prop to change its color and the `loading-animation` prop to change its animation.
+
+::component-code
+---
+collapse: true
+class: '!p-0'
+ignore:
+  - data
+  - class
+external:
+  - data
+props:
+  loading: true
+  loadingColor: primary
+  loadingAnimation: carousel
+  data:
+    - id: '4600'
+      date: '2024-03-11T15:30:00'
+      status: 'paid'
+      email: 'james.anderson@example.com'
+      amount: 594
+    - id: '4599'
+      date: '2024-03-11T10:10:00'
+      status: 'failed'
+      email: 'mia.white@example.com'
+      amount: 276
+    - id: '4598'
+      date: '2024-03-11T08:50:00'
+      status: 'refunded'
+      email: 'william.brown@example.com'
+      amount: 315
+    - id: '4597'
+      date: '2024-03-10T19:45:00'
+      status: 'paid'
+      email: 'emma.davis@example.com'
+      amount: 529
+    - id: '4596'
+      date: '2024-03-10T15:55:00'
+      status: 'paid'
+      email: 'ethan.harris@example.com'
+      amount: 639
+  class: 'flex-1'
+---
+::
+
 ## Examples
 
 ## API
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index eb7ebdbf19..177c15f800 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -179,6 +179,7 @@ export default defineNuxtConfig({
         'USlider',
         'USlideover',
         'USwitch',
+        'UTable',
         'UTabs',
         'UTextarea',
         'UTooltip'
diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
index 8477478d22..867fe2364c 100644
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -20,7 +20,7 @@ type Payment = {
 
 const table = useTemplateRef('table')
 
-const data: Payment[] = [{
+const data = ref<Payment[]>([{
   id: '4600',
   date: '2024-03-11T15:30:00',
   status: 'paid',
@@ -140,7 +140,7 @@ const data: Payment[] = [{
   status: 'paid',
   email: 'logan.baker@example.com',
   amount: 567
-}]
+}])
 
 const columns: TableColumn<Payment>[] = [{
   id: 'select',
@@ -258,10 +258,21 @@ const columns: TableColumn<Payment>[] = [{
   }
 }]
 
+const loading = ref(true)
 const columnPinning = ref({
   left: ['id'],
   right: ['actions']
 })
+
+function randomize() {
+  data.value = [...data.value].sort(() => Math.random() - 0.5)
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    loading.value = false
+  }, 1300)
+})
 </script>
 
 <template>
@@ -274,6 +285,8 @@ const columnPinning = ref({
         @update:model-value="table?.tableApi?.getColumn('email')?.setFilterValue($event)"
       />
 
+      <UButton color="neutral" variant="outline" label="Randomize" @click="randomize" />
+
       <UDropdownMenu
         :items="table?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
           label: upperFirst(column.id),
@@ -303,7 +316,9 @@ const columnPinning = ref({
       :data="data"
       :columns="columns"
       :column-pinning="columnPinning"
-      class="border border-[var(--ui-border-accented)] rounded-[var(--ui-radius)] flex-1 overflow-y-auto"
+      loading
+      sticky
+      class="border border-[var(--ui-border-accented)] rounded-[var(--ui-radius)] flex-1"
     >
       <template #expanded="{ row }">
         <pre>{{ row.original }}</pre>
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 55f072b0c3..7850e46b3a 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -1,19 +1,9 @@
 <!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import type { Ref } from 'vue'
-import { tv } from 'tailwind-variants'
+import { tv, type VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
-import type {
-  Row,
-  ColumnDef,
-  ColumnFiltersState,
-  ColumnPinningState,
-  RowSelectionState,
-  SortingState,
-  ExpandedState,
-  VisibilityState,
-  Updater
-} from '@tanstack/vue-table'
+import type { Row, ColumnDef, ColumnFiltersState, ColumnPinningState, RowSelectionState, SortingState, ExpandedState, VisibilityState, Updater } from '@tanstack/vue-table'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/table'
 
@@ -21,14 +11,26 @@ const appConfig = _appConfig as AppConfig & { ui: { table: Partial<typeof theme>
 
 const table = tv({ extend: tv(theme), ...(appConfig.ui?.table || {}) })
 
+type TableVariants = VariantProps<typeof table>
+
 export type TableColumn<T> = ColumnDef<T>
+
 export interface TableData {
   [key: string]: any
 }
 
 export interface TableProps<T> {
+  data?: T[]
   columns?: TableColumn<T>[]
-  data: T[]
+  /**
+   * Whether the table should have a sticky header.
+   * @defaultValue false
+   */
+  sticky?: boolean
+  /** Whether the table should be in loading state. */
+  loading?: boolean
+  loadingColor?: TableVariants['loadingColor']
+  loadingAnimation?: TableVariants['loadingAnimation']
   class?: any
   ui?: Partial<typeof table.slots>
 }
@@ -42,21 +44,21 @@ export interface TableSlots<T> {
 
 <script setup lang="ts" generic="T extends TableData">
 import { computed } from 'vue'
-import {
-  FlexRender,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getFilteredRowModel,
-  getSortedRowModel,
-  useVueTable
-} from '@tanstack/vue-table'
+import { FlexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getSortedRowModel, useVueTable } from '@tanstack/vue-table'
 import { upperFirst } from 'scule'
 
 const props = defineProps<TableProps<T>>()
 defineSlots<TableSlots<T>>()
 
-// eslint-disable-next-line vue/no-dupe-keys
-const ui = table()
+const data = computed(() => props.data ?? [])
+const columns = computed<TableColumn<T>[]>(() => props.columns ?? Object.keys(data.value[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: upperFirst(accessorKey) })))
+
+const ui = computed(() => table({
+  sticky: props.sticky,
+  loading: props.loading,
+  loadingColor: props.loadingColor,
+  loadingAnimation: props.loadingAnimation
+}))
 
 const globalFilterState = defineModel<string>('globalFilter', { default: undefined })
 const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
@@ -66,11 +68,9 @@ const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { defau
 const sortingState = defineModel<SortingState>('sorting', { default: [] })
 const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
 
-const columns = computed<TableColumn<T>[]>(() => props.columns ?? Object.keys(props.data[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: upperFirst(accessorKey) })))
-
 const tableApi = useVueTable({
-  get data() { return props.data },
-  get columns() { return columns.value },
+  data,
+  columns: columns.value,
   getCoreRowModel: getCoreRowModel(),
   getFilteredRowModel: getFilteredRowModel(),
   getSortedRowModel: getSortedRowModel(),
diff --git a/src/theme/table.ts b/src/theme/table.ts
index 2788e4760b..a7d04135d2 100644
--- a/src/theme/table.ts
+++ b/src/theme/table.ts
@@ -1,8 +1,10 @@
-export default {
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
   slots: {
-    root: 'relative overflow-x-auto',
-    base: 'min-w-full table-fixed divide-y divide-[var(--ui-border-accented)]',
-    thead: '',
+    root: 'relative overflow-auto',
+    base: 'min-w-full overflow-clip',
+    thead: 'relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]',
     tbody: 'divide-y divide-[var(--ui-border)]',
     tr: 'data-[state=selected]:bg-[var(--ui-bg-elevated)]/50',
     th: 'px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0',
@@ -15,6 +17,67 @@ export default {
         th: 'sticky bg-[var(--ui-bg)]/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0',
         td: 'sticky bg-[var(--ui-bg)]/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0'
       }
+    },
+    sticky: {
+      true: {
+        thead: 'sticky top-0 inset-x-0 bg-[var(--ui-bg)]/75 z-[1] backdrop-blur'
+      }
+    },
+    loading: {
+      true: {
+        thead: 'after:absolute after:bottom-0 after:inset-x-0 after:h-px'
+      }
+    },
+    loadingAnimation: {
+      'carousel': '',
+      'carousel-inverse': '',
+      'swing': '',
+      'elastic': ''
+    },
+    loadingColor: {
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
+      neutral: ''
+    }
+  },
+  compoundVariants: [...(options.theme.colors || []).map((loadingColor: string) => ({
+    loading: true,
+    loadingColor,
+    class: {
+      thead: `after:bg-[var(--ui-${loadingColor})]`
+    }
+  })), {
+    loading: true,
+    loadingColor: 'neutral',
+    class: {
+      thead: 'after:bg-[var(--ui-bg-inverted)]'
+    }
+  }, {
+    loading: true,
+    loadingAnimation: 'carousel',
+    class: {
+      thead: 'after:animate-[carousel_2s_ease-in-out_infinite]'
+    }
+  }, {
+    loading: true,
+    loadingAnimation: 'carousel-inverse',
+    class: {
+      thead: 'after:animate-[carousel-inverse_2s_ease-in-out_infinite]'
+    }
+  }, {
+    loading: true,
+    loadingAnimation: 'swing',
+    class: {
+      thead: 'after:animate-[swing_2s_ease-in-out_infinite]'
+    }
+  }, {
+    loading: true,
+    loadingAnimation: 'elastic',
+    class: {
+      thead: 'after:animate-[elastic_2s_ease-in-out_infinite]'
     }
+  }],
+  defaultVariants: {
+    loadingColor: 'primary',
+    loadingAnimation: 'carousel'
   }
-}
+})
diff --git a/test/components/Table.spec.ts b/test/components/Table.spec.ts
index 9c2e4c8e7b..a2d77a493c 100644
--- a/test/components/Table.spec.ts
+++ b/test/components/Table.spec.ts
@@ -2,8 +2,12 @@ import { h, resolveComponent } from 'vue'
 import { describe, it, expect } from 'vitest'
 import Table, { type TableProps, type TableSlots, type TableColumn } from '../../src/runtime/components/Table.vue'
 import ComponentRender from '../component-render'
+import theme from '#build/ui/table'
 
 describe('Table', () => {
+  const loadingColors = Object.keys(theme.variants.loadingColor) as any
+  const loadingAnimations = Object.keys(theme.variants.loadingAnimation) as any
+
   const UButton = resolveComponent('UButton')
   const UCheckbox = resolveComponent('UCheckbox')
   const UBadge = resolveComponent('UBadge')
@@ -146,6 +150,10 @@ describe('Table', () => {
     // Props
     ['with data', { props }],
     ['with columns', { props: { ...props, columns } }],
+    ['with sticky', { props: { ...props, sticky: true } }],
+    ['with loading', { props: { ...props, loading: true } }],
+    ...loadingColors.map((loadingColor: string) => [`with loading color ${loadingColor}`, { props: { ...props, loading: true, loadingColor } }]),
+    ...loadingAnimations.map((loadingAnimation: string) => [`with loading animation ${loadingAnimation}`, { props: { ...props, loading: true, loadingAnimation } }]),
     ['with class', { props: { ...props, class: 'absolute' } }],
     ['with ui', { props: { ...props, ui: { base: 'table-auto' } } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: TableProps<typeof data[number]>, slots?: Partial<TableSlots<typeof data[number]>> }) => {
diff --git a/test/components/__snapshots__/Table.spec.ts.snap b/test/components/__snapshots__/Table.spec.ts.snap
index 77456c3324..53b12e0b17 100644
--- a/test/components/__snapshots__/Table.spec.ts.snap
+++ b/test/components/__snapshots__/Table.spec.ts.snap
@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Table > renders with class correctly 1`] = `
-"<div class="overflow-x-auto absolute">
-  <table class="min-w-full table-fixed divide-y divide-[var(--ui-border-accented)]">
-    <thead class="">
+"<div class="overflow-auto absolute">
+  <table class="min-w-full overflow-clip">
+    <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]">
       <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
@@ -53,9 +53,9 @@ exports[`Table > renders with class correctly 1`] = `
 `;
 
 exports[`Table > renders with columns correctly 1`] = `
-"<div class="relative overflow-x-auto">
-  <table class="min-w-full table-fixed divide-y divide-[var(--ui-border-accented)]">
-    <thead class="">
+"<div class="relative overflow-auto">
+  <table class="min-w-full overflow-clip">
+    <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]">
       <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">
           <ucheckbox modelvalue="false" indeterminate="false" arialabel="Select all"></ucheckbox>
@@ -191,9 +191,685 @@ exports[`Table > renders with columns correctly 1`] = `
 `;
 
 exports[`Table > renders with data correctly 1`] = `
-"<div class="relative overflow-x-auto">
-  <table class="min-w-full table-fixed divide-y divide-[var(--ui-border-accented)]">
-    <thead class="">
+"<div class="relative overflow-auto">
+  <table class="min-w-full overflow-clip">
+    <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Email</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-[var(--ui-border)]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">carmella@hotmail.com</td>
+      </tr>
+      <!--v-if-->
+    </tbody>
+  </table>
+</div>"
+`;
+
+exports[`Table > renders with loading animation carousel correctly 1`] = `
+"<div class="relative overflow-auto">
+  <table class="min-w-full overflow-clip">
+    <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-primary)] after:animate-[carousel_2s_ease-in-out_infinite]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Email</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-[var(--ui-border)]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">carmella@hotmail.com</td>
+      </tr>
+      <!--v-if-->
+    </tbody>
+  </table>
+</div>"
+`;
+
+exports[`Table > renders with loading animation carousel-inverse correctly 1`] = `
+"<div class="relative overflow-auto">
+  <table class="min-w-full overflow-clip">
+    <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-primary)] after:animate-[carousel-inverse_2s_ease-in-out_infinite]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Email</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-[var(--ui-border)]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">carmella@hotmail.com</td>
+      </tr>
+      <!--v-if-->
+    </tbody>
+  </table>
+</div>"
+`;
+
+exports[`Table > renders with loading animation elastic correctly 1`] = `
+"<div class="relative overflow-auto">
+  <table class="min-w-full overflow-clip">
+    <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-primary)] after:animate-[elastic_2s_ease-in-out_infinite]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Email</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-[var(--ui-border)]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">carmella@hotmail.com</td>
+      </tr>
+      <!--v-if-->
+    </tbody>
+  </table>
+</div>"
+`;
+
+exports[`Table > renders with loading animation swing correctly 1`] = `
+"<div class="relative overflow-auto">
+  <table class="min-w-full overflow-clip">
+    <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-primary)] after:animate-[swing_2s_ease-in-out_infinite]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Email</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-[var(--ui-border)]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">carmella@hotmail.com</td>
+      </tr>
+      <!--v-if-->
+    </tbody>
+  </table>
+</div>"
+`;
+
+exports[`Table > renders with loading color error correctly 1`] = `
+"<div class="relative overflow-auto">
+  <table class="min-w-full overflow-clip">
+    <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-error)] after:animate-[carousel_2s_ease-in-out_infinite]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Email</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-[var(--ui-border)]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">carmella@hotmail.com</td>
+      </tr>
+      <!--v-if-->
+    </tbody>
+  </table>
+</div>"
+`;
+
+exports[`Table > renders with loading color info correctly 1`] = `
+"<div class="relative overflow-auto">
+  <table class="min-w-full overflow-clip">
+    <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-info)] after:animate-[carousel_2s_ease-in-out_infinite]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Email</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-[var(--ui-border)]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">carmella@hotmail.com</td>
+      </tr>
+      <!--v-if-->
+    </tbody>
+  </table>
+</div>"
+`;
+
+exports[`Table > renders with loading color neutral correctly 1`] = `
+"<div class="relative overflow-auto">
+  <table class="min-w-full overflow-clip">
+    <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-bg-inverted)] after:animate-[carousel_2s_ease-in-out_infinite]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Email</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-[var(--ui-border)]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">carmella@hotmail.com</td>
+      </tr>
+      <!--v-if-->
+    </tbody>
+  </table>
+</div>"
+`;
+
+exports[`Table > renders with loading color primary correctly 1`] = `
+"<div class="relative overflow-auto">
+  <table class="min-w-full overflow-clip">
+    <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-primary)] after:animate-[carousel_2s_ease-in-out_infinite]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Email</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-[var(--ui-border)]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">carmella@hotmail.com</td>
+      </tr>
+      <!--v-if-->
+    </tbody>
+  </table>
+</div>"
+`;
+
+exports[`Table > renders with loading color secondary correctly 1`] = `
+"<div class="relative overflow-auto">
+  <table class="min-w-full overflow-clip">
+    <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-secondary)] after:animate-[carousel_2s_ease-in-out_infinite]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Email</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-[var(--ui-border)]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">carmella@hotmail.com</td>
+      </tr>
+      <!--v-if-->
+    </tbody>
+  </table>
+</div>"
+`;
+
+exports[`Table > renders with loading color success correctly 1`] = `
+"<div class="relative overflow-auto">
+  <table class="min-w-full overflow-clip">
+    <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-success)] after:animate-[carousel_2s_ease-in-out_infinite]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Email</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-[var(--ui-border)]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">carmella@hotmail.com</td>
+      </tr>
+      <!--v-if-->
+    </tbody>
+  </table>
+</div>"
+`;
+
+exports[`Table > renders with loading color warning correctly 1`] = `
+"<div class="relative overflow-auto">
+  <table class="min-w-full overflow-clip">
+    <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-warning)] after:animate-[carousel_2s_ease-in-out_infinite]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Email</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-[var(--ui-border)]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">carmella@hotmail.com</td>
+      </tr>
+      <!--v-if-->
+    </tbody>
+  </table>
+</div>"
+`;
+
+exports[`Table > renders with loading correctly 1`] = `
+"<div class="relative overflow-auto">
+  <table class="min-w-full overflow-clip">
+    <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-primary)] after:animate-[carousel_2s_ease-in-out_infinite]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Email</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-[var(--ui-border)]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
+      </tr>
+      <!--v-if-->
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
+        <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">carmella@hotmail.com</td>
+      </tr>
+      <!--v-if-->
+    </tbody>
+  </table>
+</div>"
+`;
+
+exports[`Table > renders with sticky correctly 1`] = `
+"<div class="relative overflow-auto">
+  <table class="min-w-full overflow-clip">
+    <thead class="[&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] sticky top-0 inset-x-0 bg-[var(--ui-bg)]/75 z-[1] backdrop-blur">
       <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
@@ -243,9 +919,9 @@ exports[`Table > renders with data correctly 1`] = `
 `;
 
 exports[`Table > renders with ui correctly 1`] = `
-"<div class="relative overflow-x-auto">
-  <table class="min-w-full divide-y divide-[var(--ui-border-accented)] table-auto">
-    <thead class="">
+"<div class="relative overflow-auto">
+  <table class="min-w-full overflow-clip table-auto">
+    <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]">
       <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>

From a9b373f658e8af1247d1c0052ddc6604890ecd5f Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 22 Oct 2024 17:50:20 +0200
Subject: [PATCH 20/26] up

---
 .../app/components/content/ComponentProps.vue |  1 +
 .../content/ComponentPropsLinks.vue           | 19 +++++
 docs/content/3.components/table.md            | 75 +++++++++++-------
 src/module.ts                                 | 12 +--
 src/runtime/components/Carousel.vue           | 12 +--
 src/runtime/components/Table.vue              | 76 +++++++++++++++++--
 src/theme/command-palette.ts                  |  2 +-
 src/theme/table.ts                            |  2 +-
 test/components/CommandPalette.spec.ts        |  3 +-
 test/components/Table.spec.ts                 |  1 +
 .../__snapshots__/CommandPalette.spec.ts.snap | 65 +++++++++++++++-
 .../__snapshots__/Table.spec.ts.snap          | 15 ++++
 12 files changed, 234 insertions(+), 49 deletions(-)
 create mode 100644 docs/app/components/content/ComponentPropsLinks.vue

diff --git a/docs/app/components/content/ComponentProps.vue b/docs/app/components/content/ComponentProps.vue
index 6efaca5b96..c3c920e2cf 100644
--- a/docs/app/components/content/ComponentProps.vue
+++ b/docs/app/components/content/ComponentProps.vue
@@ -99,6 +99,7 @@ const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
 
           <MDC v-if="prop.description" :value="prop.description" class="text-[var(--ui-text-toned)] mt-1" />
 
+          <ComponentPropsLinks v-if="prop.tags?.length" :prop="prop" />
           <ComponentPropsSchema v-if="prop.schema" :prop="prop" :ignore="ignore" />
         </ProseTd>
       </ProseTr>
diff --git a/docs/app/components/content/ComponentPropsLinks.vue b/docs/app/components/content/ComponentPropsLinks.vue
new file mode 100644
index 0000000000..bd032b5c7e
--- /dev/null
+++ b/docs/app/components/content/ComponentPropsLinks.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { PropertyMeta } from 'vue-component-meta'
+
+const props = defineProps<{
+  prop: PropertyMeta
+}>()
+
+const links = computed(() => {
+  return props.prop.tags?.filter((tag: any) => tag.name === 'link')
+})
+</script>
+
+<template>
+  <ProseUl v-if="links?.length">
+    <ProseLi v-for="link in links" :key="link.name">
+      <MDC :value="link.text ?? ''" class="my-1" />
+    </ProseLi>
+  </ProseUl>
+</template>
diff --git a/docs/content/3.components/table.md b/docs/content/3.components/table.md
index cf90a2db99..0aac37f7de 100644
--- a/docs/content/3.components/table.md
+++ b/docs/content/3.components/table.md
@@ -12,6 +12,8 @@ links:
 
 ## Usage
 
+The Table component is built on top of [TanStack Table](https://tanstack.com/table/latest) and is powered by the [useVueTable](https://tanstack.com/table/latest/docs/framework/vue/vue-table#usevuetable) composable to provide a flexible and fully type-safe API.
+
 ### Data
 
 Use the `data` prop as an array of objects, the columns will be generated based on the keys of the objects.
@@ -58,27 +60,30 @@ props:
 
 ### Columns
 
-Use the `columns` prop as an array of objects with the following properties:
+Use the `columns` prop as an array of [ColumnDef](https://tanstack.com/table/latest/docs/api/core/column-def) objects with properties like:
+
+- `accessorKey`: [The key of the row object to use when extracting the value for the column.]{class="text-[var(--ui-text-muted)]"}
+- `header`: [The header to display for the column. If a string is passed, it can be used as a default for the column ID. If a function is passed, it will be passed a props object for the header and should return the rendered header value (the exact type depends on the adapter being used).]{class="text-[var(--ui-text-muted)]"}
+- `cell`: [The cell to display each row for the column. If a function is passed, it will be passed a props object for the cell and should return the rendered cell value (the exact type depends on the adapter being used).]{class="text-[var(--ui-text-muted)]"}
 
-- `accessorKey`: The key of the column.
-- `header`: The header of the column.
-- `footer`: The footer of the column.
+You can take advantage of the Vue [`h` function](https://vuejs.org/api/render-function.html#h) to render components or other HTML elements.
 
 ::component-example
 ---
+prettier: true
 collapse: true
 class: '!p-0'
 name: 'table-columns-example'
 ---
 ::
 
-::note{to="https://tanstack.com/table/latest/docs/guide/column-defs" target="_blank"}
-For more information on columns, see the [TanStack Table documentation](https://tanstack.com/table/latest/docs/guide/column-defs).
+::warning
+Make sure to use `resolveComponent` when rendering components using the `h` function.
 ::
 
-### Sticky
+### Loading
 
-Use the `sticky` prop to make the header sticky.
+Use the `loading` prop to display a loading state, the `loading-color` prop to change its color and the `loading-animation` prop to change its animation.
 
 ::component-code
 ---
@@ -90,7 +95,9 @@ ignore:
 external:
   - data
 props:
-  sticky: true
+  loading: true
+  loadingColor: primary
+  loadingAnimation: carousel
   data:
     - id: '4600'
       date: '2024-03-11T15:30:00'
@@ -117,23 +124,13 @@ props:
       status: 'paid'
       email: 'ethan.harris@example.com'
       amount: 639
-    - id: '4595'
-      date: '2024-03-10T15:55:00'
-      status: 'paid'
-      email: 'ethan.harris@example.com'
-      amount: 639
-    - id: '4594'
-      date: '2024-03-10T15:55:00'
-      status: 'paid'
-      email: 'ethan.harris@example.com'
-      amount: 639
-  class: 'flex-1 max-h-[312px]'
+  class: 'flex-1'
 ---
 ::
 
-### Loading
+### Sticky
 
-Use the `loading` prop to display a loading state, the `loading-color` prop to change its color and the `loading-animation` prop to change its animation.
+Use the `sticky` prop to make the header sticky.
 
 ::component-code
 ---
@@ -145,9 +142,7 @@ ignore:
 external:
   - data
 props:
-  loading: true
-  loadingColor: primary
-  loadingAnimation: carousel
+  sticky: true
   data:
     - id: '4600'
       date: '2024-03-11T15:30:00'
@@ -174,12 +169,40 @@ props:
       status: 'paid'
       email: 'ethan.harris@example.com'
       amount: 639
-  class: 'flex-1'
+    - id: '4595'
+      date: '2024-03-10T15:55:00'
+      status: 'paid'
+      email: 'ethan.harris@example.com'
+      amount: 639
+    - id: '4594'
+      date: '2024-03-10T15:55:00'
+      status: 'paid'
+      email: 'ethan.harris@example.com'
+      amount: 639
+  class: 'flex-1 max-h-[312px]'
 ---
 ::
 
 ## Examples
 
+### With row actions
+
+### With row selection
+
+### With expandable rows
+
+### With column pinning
+
+### With column visibility
+
+### With column sorting
+
+### With column filtering
+
+### With global filtering
+
+### With fetched data
+
 ## API
 
 ### Props
diff --git a/src/module.ts b/src/module.ts
index 6277323a66..122d234284 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -10,40 +10,40 @@ export interface ModuleOptions {
   /**
    * Prefix for components
    * @defaultValue `U`
-   * @see https://ui3.nuxt.dev/getting-started/installation#prefix
+   * @link https://ui3.nuxt.dev/getting-started/installation#prefix
    */
   prefix?: string
 
   /**
    * Enable or disable `@nuxt/fonts` module
    * @defaultValue `true`
-   * @see https://ui3.nuxt.dev/getting-started/installation#fonts
+   * @link https://ui3.nuxt.dev/getting-started/installation#fonts
    */
   fonts?: boolean
 
   /**
    * Enable or disable `@nuxtjs/color-mode` module
    * @defaultValue `true`
-   * @see https://ui3.nuxt.dev/getting-started/installation#colormode
+   * @link https://ui3.nuxt.dev/getting-started/installation#colormode
    */
   colorMode?: boolean
 
   /**
    * Customize how the theme is generated
-   * @see https://ui3.nuxt.dev/getting-started/theme
+   * @link https://ui3.nuxt.dev/getting-started/theme
    */
   theme?: {
     /**
      * Define the color aliases available for components
      * @defaultValue `['primary', 'secondary', 'success', 'info', 'warning', 'error']`
-     * @see https://ui3.nuxt.dev/getting-started/installation#themecolors
+     * @link https://ui3.nuxt.dev/getting-started/installation#themecolors
      */
     colors?: string[]
 
     /**
      * Enable or disable transitions on components
      * @defaultValue `true`
-     * @see https://ui3.nuxt.dev/getting-started/installation#themetransitions
+     * @link https://ui3.nuxt.dev/getting-started/installation#themetransitions
      */
     transitions?: boolean
   }
diff --git a/src/runtime/components/Carousel.vue b/src/runtime/components/Carousel.vue
index db88d7a257..5b5cc1c738 100644
--- a/src/runtime/components/Carousel.vue
+++ b/src/runtime/components/Carousel.vue
@@ -55,32 +55,32 @@ export interface CarouselProps<T> extends Omit<EmblaOptionsType, 'axis' | 'conta
   items?: T[]
   /**
    * Enable Autoplay plugin
-   * @see https://www.embla-carousel.com/plugins/autoplay/
+   * @link https://www.embla-carousel.com/plugins/autoplay/
    */
   autoplay?: boolean | AutoplayOptionsType
   /**
    * Enable Auto Scroll plugin
-   * @see https://www.embla-carousel.com/plugins/auto-scroll/
+   * @link https://www.embla-carousel.com/plugins/auto-scroll/
    */
   autoScroll?: boolean | AutoScrollOptionsType
   /**
    * Enable Auto Height plugin
-   * @see https://www.embla-carousel.com/plugins/auto-height/
+   * @link https://www.embla-carousel.com/plugins/auto-height/
    */
   autoHeight?: boolean | AutoHeightOptionsType
   /**
    * Enable Class Names plugin
-   * @see https://www.embla-carousel.com/plugins/class-names/
+   * @link https://www.embla-carousel.com/plugins/class-names/
    */
   classNames?: boolean | ClassNamesOptionsType
   /**
    * Enable Fade plugin
-   * @see https://www.embla-carousel.com/plugins/fade/
+   * @link https://www.embla-carousel.com/plugins/fade/
    */
   fade?: boolean | FadeOptionsType
   /**
    * Enable Wheel Gestures plugin
-   * @see https://www.embla-carousel.com/plugins/wheel-gestures/
+   * @link https://www.embla-carousel.com/plugins/wheel-gestures/
    */
   wheelGestures?: boolean | WheelGesturesPluginOptions
   class?: any
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 7850e46b3a..d7c9f67f3d 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -3,7 +3,24 @@
 import type { Ref } from 'vue'
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
-import type { Row, ColumnDef, ColumnFiltersState, ColumnPinningState, RowSelectionState, SortingState, ExpandedState, VisibilityState, Updater } from '@tanstack/vue-table'
+import type {
+  Row,
+  ColumnDef,
+  ColumnFiltersState,
+  ColumnPinningState,
+  RowSelectionState,
+  SortingState,
+  ExpandedState,
+  VisibilityState,
+  GlobalFilterOptions,
+  ColumnFiltersOptions,
+  ColumnPinningOptions,
+  VisibilityOptions,
+  ExpandedOptions,
+  SortingOptions,
+  RowSelectionOptions,
+  Updater
+} from '@tanstack/vue-table'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/table'
 
@@ -31,6 +48,41 @@ export interface TableProps<T> {
   loading?: boolean
   loadingColor?: TableVariants['loadingColor']
   loadingAnimation?: TableVariants['loadingAnimation']
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/global-filtering)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/global-filtering)
+   */
+  globalFilterOptions?: Omit<GlobalFilterOptions<T>, 'onGlobalFilterChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-filtering)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-filtering)
+   */
+  columnFiltersOptions?: Omit<ColumnFiltersOptions<T>, 'getFilteredRowModel' | 'onColumnFiltersChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-pinning#enablecolumnpinning)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-pinning)
+   */
+  columnPinningOptions?: Omit<ColumnPinningOptions, 'onColumnPinningChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-visibility#enablehiding)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-visibility)
+   */
+  visibilityOptions?: Omit<VisibilityOptions, 'onColumnVisibilityChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#enablemultiremove)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
+   */
+  sortingOptions?: Omit<SortingOptions<T>, 'getSortedRowModel' | 'onSortingChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/expanding#autoresetexpanded)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/expanding)
+   */
+  expandedOptions?: Omit<ExpandedOptions<T>, 'getExpandedRowModel' | 'onExpandedChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#enablemultirowselection)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-selection)
+   */
+  rowSelectionOptions?: Omit<RowSelectionOptions<T>, 'onRowSelectionChange'>
   class?: any
   ui?: Partial<typeof table.slots>
 }
@@ -44,7 +96,14 @@ export interface TableSlots<T> {
 
 <script setup lang="ts" generic="T extends TableData">
 import { computed } from 'vue'
-import { FlexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getSortedRowModel, useVueTable } from '@tanstack/vue-table'
+import {
+  FlexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  getExpandedRowModel,
+  useVueTable
+} from '@tanstack/vue-table'
 import { upperFirst } from 'scule'
 
 const props = defineProps<TableProps<T>>()
@@ -72,15 +131,22 @@ const tableApi = useVueTable({
   data,
   columns: columns.value,
   getCoreRowModel: getCoreRowModel(),
-  getFilteredRowModel: getFilteredRowModel(),
-  getSortedRowModel: getSortedRowModel(),
-  getExpandedRowModel: getExpandedRowModel(),
+  ...(props.globalFilterOptions || {}),
   onGlobalFilterChange: updaterOrValue => valueUpdater(updaterOrValue, globalFilterState),
+  ...(props.columnFiltersOptions || {}),
+  getFilteredRowModel: getFilteredRowModel(),
   onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFiltersState),
+  ...(props.visibilityOptions || {}),
   onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibilityState),
+  ...(props.columnPinningOptions || {}),
   onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinningState),
+  ...(props.rowSelectionOptions || {}),
   onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelectionState),
+  ...(props.sortingOptions || {}),
+  getSortedRowModel: getSortedRowModel(),
   onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sortingState),
+  ...(props.expandedOptions || {}),
+  getExpandedRowModel: getExpandedRowModel(),
   onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expandedState),
   state: {
     get globalFilter() {
diff --git a/src/theme/command-palette.ts b/src/theme/command-palette.ts
index 71e3a95aee..2a9316ed39 100644
--- a/src/theme/command-palette.ts
+++ b/src/theme/command-palette.ts
@@ -8,7 +8,7 @@ export default (options: Required<ModuleOptions>) => ({
     content: 'relative overflow-hidden',
     viewport: 'divide-y divide-[var(--ui-border)] scroll-py-1',
     group: 'p-1 isolate',
-    empty: 'py-6 text-center text-sm',
+    empty: 'py-6 text-center text-sm text-[var(--ui-text-muted)]',
     label: 'px-2 py-1.5 text-xs font-semibold text-[var(--ui-text-highlighted)]',
     item: ['group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
     itemLeadingIcon: ['shrink-0 size-5 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)]', options.theme.transitions && 'transition-colors'],
diff --git a/src/theme/table.ts b/src/theme/table.ts
index a7d04135d2..990410b360 100644
--- a/src/theme/table.ts
+++ b/src/theme/table.ts
@@ -9,7 +9,7 @@ export default (options: Required<ModuleOptions>) => ({
     tr: 'data-[state=selected]:bg-[var(--ui-bg-elevated)]/50',
     th: 'px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0',
     td: 'p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0',
-    empty: 'h-24 text-center'
+    empty: 'py-6 text-center text-sm text-[var(--ui-text-muted)]'
   },
   variants: {
     pinned: {
diff --git a/test/components/CommandPalette.spec.ts b/test/components/CommandPalette.spec.ts
index 4eec41187a..e7c66cc842 100644
--- a/test/components/CommandPalette.spec.ts
+++ b/test/components/CommandPalette.spec.ts
@@ -62,6 +62,7 @@ describe('CommandPalette', () => {
   it.each([
     // Props
     ['with groups', { props }],
+    ['without results', {}],
     ['with modelValue', { props: { ...props, modelValue: groups[2].items[0] } }],
     ['with defaultValue', { props: { ...props, defaultValue: groups[2].items[0] } }],
     ['with labelKey', { props: { ...props, labelKey: 'icon' } }],
@@ -69,7 +70,7 @@ describe('CommandPalette', () => {
     ['with disabled', { props: { ...props, disabled: true } }],
     ['with icon', { props: { ...props, icon: 'i-heroicons-command-line' } }],
     ['with loading', { props: { ...props, loading: true } }],
-    ['with loadingIcon', { props: { loading: true, loadingIcon: 'i-heroicons-sparkles' } }],
+    ['with loadingIcon', { props: { ...props, loading: true, loadingIcon: 'i-heroicons-sparkles' } }],
     ['with selectedIcon', { props: { ...props, selectedIcon: 'i-heroicons-check-badge', modelValue: groups[2].items[0] } }],
     ['with close', { props: { ...props, close: true } }],
     ['with closeIcon', { props: { ...props, close: true, closeIcon: 'i-heroicons-trash' } }],
diff --git a/test/components/Table.spec.ts b/test/components/Table.spec.ts
index a2d77a493c..0e1951c791 100644
--- a/test/components/Table.spec.ts
+++ b/test/components/Table.spec.ts
@@ -149,6 +149,7 @@ describe('Table', () => {
   it.each([
     // Props
     ['with data', { props }],
+    ['without results', {}],
     ['with columns', { props: { ...props, columns } }],
     ['with sticky', { props: { ...props, sticky: true } }],
     ['with loading', { props: { ...props, loading: true } }],
diff --git a/test/components/__snapshots__/CommandPalette.spec.ts.snap b/test/components/__snapshots__/CommandPalette.spec.ts.snap
index 1e58aa71d2..9faf076ebb 100644
--- a/test/components/__snapshots__/CommandPalette.spec.ts.snap
+++ b/test/components/__snapshots__/CommandPalette.spec.ts.snap
@@ -984,13 +984,45 @@ exports[`CommandPalette > renders with loading correctly 1`] = `
 
 exports[`CommandPalette > renders with loadingIcon correctly 1`] = `
 "<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-[var(--ui-border)]">
-  <div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-[var(--ui-text-highlighted)] pl-10" autocomplete="false" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:sparkles shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span>
+  <div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-[var(--ui-text-highlighted)] pl-10" autocomplete="false" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:sparkles shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span>
     <!--v-if-->
   </div>
   <!--teleport start-->
   <div id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial;" class="relative overflow-hidden">
-    <div class="py-6 text-center text-sm">No results</div>
-    <div class="divide-y divide-[var(--ui-border)] scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;"></div>
+    <!---->
+    <div class="divide-y divide-[var(--ui-border)] scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;">
+      <div role="group" aria-labelledby="radix-vue-combobox-group-v-0-0-1" class="p-1 isolate">
+        <!--v-if-->
+        <div id="radix-vue-combobox-option-v-0-0-3" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-2" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="" data-highlighted=""><span class="iconify i-heroicons:document-plus shrink-0 size-5 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] transition-colors" aria-hidden="true"></span><span class="truncate space-x-1"><!--v-if--><span class="text-[var(--ui-text-highlighted)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]">Add new file</span><span class="text-[var(--ui-text-dimmed)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]">Create a new file in the current directory or workspace.</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⌃</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">N</kbd></span>
+          <!----></span>
+        </div>
+        <div id="radix-vue-combobox-option-v-0-0-5" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-4" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors" data-radix-vue-combobox-item=""><span class="iconify i-heroicons:folder-plus shrink-0 size-5 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] transition-colors" aria-hidden="true"></span><span class="truncate space-x-1"><!--v-if--><span class="text-[var(--ui-text-highlighted)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]">Add new folder</span><span class="text-[var(--ui-text-dimmed)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]">Create a new folder in the current directory or workspace.</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⌃</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">F</kbd></span>
+          <!----></span>
+        </div>
+        <div id="radix-vue-combobox-option-v-0-0-7" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-6" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors" data-radix-vue-combobox-item=""><span class="iconify i-heroicons:hashtag shrink-0 size-5 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] transition-colors" aria-hidden="true"></span><span class="truncate space-x-1"><!--v-if--><span class="text-[var(--ui-text-highlighted)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]">Add hashtag</span><span class="text-[var(--ui-text-dimmed)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]">Add a hashtag to the current item.</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⌃</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">H</kbd></span>
+          <!----></span>
+        </div>
+        <div id="radix-vue-combobox-option-v-0-0-9" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-8" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors" data-radix-vue-combobox-item=""><span class="iconify i-heroicons:tag shrink-0 size-5 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] transition-colors" aria-hidden="true"></span><span class="truncate space-x-1"><!--v-if--><span class="text-[var(--ui-text-highlighted)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]">Add label</span><span class="text-[var(--ui-text-dimmed)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]">Add a label to the current item.</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⌃</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">L</kbd></span>
+          <!----></span>
+        </div>
+      </div>
+      <div role="group" aria-labelledby="radix-vue-combobox-group-v-0-0-10" class="p-1 isolate">
+        <div id="radix-vue-combobox-group-v-0-0-10" class="px-2 py-1.5 text-xs font-semibold text-[var(--ui-text-highlighted)]">Labels</div>
+        <div id="radix-vue-combobox-option-v-0-0-12" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-11" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-error)] h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-[var(--ui-text-highlighted)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]">bug</span><span class="text-[var(--ui-text-dimmed)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </div>
+        <div id="radix-vue-combobox-option-v-0-0-14" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-13" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-success)] h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-[var(--ui-text-highlighted)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]">feature</span><span class="text-[var(--ui-text-dimmed)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </div>
+        <div id="radix-vue-combobox-option-v-0-0-16" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-15" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
+          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-info)] h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-[var(--ui-text-highlighted)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]">enhancement</span><span class="text-[var(--ui-text-dimmed)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </div>
+      </div>
+      <div role="group" aria-labelledby="radix-vue-combobox-group-v-0-0-17" class="p-1 isolate">
+        <div id="radix-vue-combobox-group-v-0-0-17" class="px-2 py-1.5 text-xs font-semibold text-[var(--ui-text-highlighted)]">Users</div>
+        <div id="radix-vue-combobox-option-v-0-0-19" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-0-0-18" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors" data-radix-vue-combobox-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span><span class="truncate space-x-1"><!--v-if--><span class="text-[var(--ui-text-highlighted)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]">benjamincanac</span><span class="text-[var(--ui-text-dimmed)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      </div>
+    </div>
     <style>
       /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
       [data-radix-combobox-viewport] {
@@ -1244,3 +1276,30 @@ exports[`CommandPalette > renders with ui correctly 1`] = `
   <!---->
 </div>"
 `;
+
+exports[`CommandPalette > renders without results correctly 1`] = `
+"<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-[var(--ui-border)]">
+  <div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-[var(--ui-text-highlighted)] pl-10" autocomplete="false" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
+    <!--v-if-->
+  </div>
+  <!--teleport start-->
+  <div id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial;" class="relative overflow-hidden">
+    <div class="py-6 text-center text-sm text-[var(--ui-text-muted)]">No results</div>
+    <div class="divide-y divide-[var(--ui-border)] scroll-py-1" data-radix-combobox-viewport="" role="presentation" style="position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; overflow: auto;"></div>
+    <style>
+      /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
+      [data-radix-combobox-viewport] {
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        -webkit-overflow-scrolling: touch;
+      }
+
+      [data-radix-combobox-viewport]::-webkit-scrollbar {
+        display: none;
+      }
+    </style>
+  </div>
+  <!--teleport end-->
+  <!---->
+</div>"
+`;
diff --git a/test/components/__snapshots__/Table.spec.ts.snap b/test/components/__snapshots__/Table.spec.ts.snap
index 53b12e0b17..1e84164f61 100644
--- a/test/components/__snapshots__/Table.spec.ts.snap
+++ b/test/components/__snapshots__/Table.spec.ts.snap
@@ -969,3 +969,18 @@ exports[`Table > renders with ui correctly 1`] = `
   </table>
 </div>"
 `;
+
+exports[`Table > renders without results correctly 1`] = `
+"<div class="relative overflow-auto">
+  <table class="min-w-full overflow-clip">
+    <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50"></tr>
+    </thead>
+    <tbody class="divide-y divide-[var(--ui-border)]">
+      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+        <td colspan="0" class="py-6 text-center text-sm text-[var(--ui-text-muted)]"> No results </td>
+      </tr>
+    </tbody>
+  </table>
+</div>"
+`;

From 7c366c869352630f54458bed3c22ac2f18c21732 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 22 Oct 2024 18:42:20 +0200
Subject: [PATCH 21/26] up

---
 .../app/components/content/ComponentPropsLinks.vue |  4 +---
 docs/app/components/content/ComponentTheme.vue     |  8 ++++++++
 src/runtime/components/Table.vue                   | 14 +++++++-------
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/docs/app/components/content/ComponentPropsLinks.vue b/docs/app/components/content/ComponentPropsLinks.vue
index bd032b5c7e..2011c0bae9 100644
--- a/docs/app/components/content/ComponentPropsLinks.vue
+++ b/docs/app/components/content/ComponentPropsLinks.vue
@@ -5,9 +5,7 @@ const props = defineProps<{
   prop: PropertyMeta
 }>()
 
-const links = computed(() => {
-  return props.prop.tags?.filter((tag: any) => tag.name === 'link')
-})
+const links = computed(() => props.prop.tags?.filter((tag: any) => tag.name === 'link'))
 </script>
 
 <template>
diff --git a/docs/app/components/content/ComponentTheme.vue b/docs/app/components/content/ComponentTheme.vue
index 7063dfc228..a20057b25b 100644
--- a/docs/app/components/content/ComponentTheme.vue
+++ b/docs/app/components/content/ComponentTheme.vue
@@ -28,6 +28,14 @@ function stripCompoundVariants(component?: any) {
         }
       }
 
+      if (compoundVariant.loadingColor) {
+        if (!['primary', 'neutral'].includes(compoundVariant.loadingColor)) {
+          strippedCompoundVariants.value = true
+
+          return false
+        }
+      }
+
       return true
     })
   }
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index d7c9f67f3d..a84bf0969a 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -49,37 +49,37 @@ export interface TableProps<T> {
   loadingColor?: TableVariants['loadingColor']
   loadingAnimation?: TableVariants['loadingAnimation']
   /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/global-filtering)
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/global-filtering#table-options)
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/global-filtering)
    */
   globalFilterOptions?: Omit<GlobalFilterOptions<T>, 'onGlobalFilterChange'>
   /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-filtering)
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-filtering#table-options)
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-filtering)
    */
   columnFiltersOptions?: Omit<ColumnFiltersOptions<T>, 'getFilteredRowModel' | 'onColumnFiltersChange'>
   /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-pinning#enablecolumnpinning)
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-pinning#table-options)
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-pinning)
    */
   columnPinningOptions?: Omit<ColumnPinningOptions, 'onColumnPinningChange'>
   /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-visibility#enablehiding)
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-visibility#table-options)
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-visibility)
    */
   visibilityOptions?: Omit<VisibilityOptions, 'onColumnVisibilityChange'>
   /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#enablemultiremove)
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#table-options)
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
    */
   sortingOptions?: Omit<SortingOptions<T>, 'getSortedRowModel' | 'onSortingChange'>
   /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/expanding#autoresetexpanded)
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/expanding#table-options)
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/expanding)
    */
   expandedOptions?: Omit<ExpandedOptions<T>, 'getExpandedRowModel' | 'onExpandedChange'>
   /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#enablemultirowselection)
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#table-options)
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-selection)
    */
   rowSelectionOptions?: Omit<RowSelectionOptions<T>, 'onRowSelectionChange'>

From c208c5491fd09d55e1569e09ba0270bdd662fa4e Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 23 Oct 2024 10:46:40 +0200
Subject: [PATCH 22/26] up

---
 .../examples/table/TableFetchExample.vue      | 130 ++++++++++++++++++
 .../examples/table/TableRowActionsExample.vue |  96 +++++++++++++
 docs/content/3.components/table.md            |  10 ++
 playground/app/pages/components/table.vue     |   2 +-
 4 files changed, 237 insertions(+), 1 deletion(-)
 create mode 100644 docs/app/components/content/examples/table/TableFetchExample.vue
 create mode 100644 docs/app/components/content/examples/table/TableRowActionsExample.vue

diff --git a/docs/app/components/content/examples/table/TableFetchExample.vue b/docs/app/components/content/examples/table/TableFetchExample.vue
new file mode 100644
index 0000000000..27446d4904
--- /dev/null
+++ b/docs/app/components/content/examples/table/TableFetchExample.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import type { TableColumn } from '@nuxt/ui'
+
+type User = {
+  id: number
+  name: string
+  username: string
+  email: string
+  avatar: { src: string }
+  company: { name: string }
+}
+
+const { data: users, status } = await useFetch<User[]>('https://jsonplaceholder.typicode.com/users', {
+  transform: (data) => {
+    return data?.map(user => ({
+      ...user,
+      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
+    })) || []
+  },
+  lazy: true
+})
+
+const UAvatar = resolveComponent('UAvatar')
+const UButton = resolveComponent('UButton')
+const UCheckbox = resolveComponent('UCheckbox')
+const UBadge = resolveComponent('UBadge')
+const UDropdownMenu = resolveComponent('UDropdownMenu')
+
+const columns: TableColumn<User>[] = [{
+  id: 'select',
+  header: ({ table }) => h(UCheckbox, {
+    'modelValue': table.getIsAllPageRowsSelected(),
+    'indeterminate': table.getIsSomePageRowsSelected(),
+    'onUpdate:modelValue': (value: boolean) => table.toggleAllPageRowsSelected(!!value),
+    'ariaLabel': 'Select all'
+  }),
+  cell: ({ row }) => h(UCheckbox, {
+    'modelValue': row.getIsSelected(),
+    'onUpdate:modelValue': (value: boolean) => row.toggleSelected(!!value),
+    'ariaLabel': 'Select row'
+  }),
+  enableSorting: false,
+  enableHiding: false
+}, {
+  accessorKey: 'id',
+  header: '#',
+  cell: ({ row }) => `#${row.getValue('id')}`
+}, {
+  accessorKey: 'name',
+  header: 'Name',
+  cell: ({ row }) => {
+    // return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
+  }
+}, {
+  accessorKey: 'email',
+  header: ({ column }) => {
+    const isSorted = column.getIsSorted()
+
+    return h(UButton, {
+      color: 'neutral',
+      variant: 'ghost',
+      label: 'Email',
+      icon: isSorted ? (isSorted === 'asc' ? 'i-heroicons-bars-arrow-up-20-solid' : 'i-heroicons-bars-arrow-down-20-solid') : 'i-heroicons-arrows-up-down-20-solid',
+      class: '-mx-2.5',
+      onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
+    })
+  },
+  cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email'))
+}, {
+  accessorKey: 'amount',
+  header: () => h('div', { class: 'text-right' }, 'Amount'),
+  cell: ({ row }) => {
+    const amount = Number.parseFloat(row.getValue('amount'))
+
+    const formatted = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'EUR'
+    }).format(amount)
+
+    return h('div', { class: 'text-right font-medium' }, formatted)
+  }
+}, {
+  id: 'actions',
+  enableHiding: false,
+  cell: ({ row }) => {
+    const items = [{
+      type: 'label',
+      label: 'Actions'
+    }, {
+      label: 'Copy payment ID',
+      onSelect() {
+        navigator.clipboard.writeText(row.original.id)
+
+        toast.add({
+          title: 'Payment ID copied to clipboard!',
+          color: 'success',
+          icon: 'i-heroicons-check-circle'
+        })
+      }
+    }, {
+      label: row.getIsExpanded() ? 'Collapse' : 'Expand',
+      onSelect() {
+        row.toggleExpanded()
+      }
+    }, {
+      type: 'separator'
+    }, {
+      label: 'View customer'
+    }, {
+      label: 'View payment details'
+    }]
+
+    return h('div', { class: 'text-right' }, h(UDropdownMenu, {
+      content: {
+        align: 'end'
+      },
+      items
+    }, () => h(UButton, {
+      icon: 'i-heroicons-ellipsis-vertical-20-solid',
+      color: 'neutral',
+      variant: 'ghost',
+      class: 'ml-auto'
+    })))
+  }
+}]
+</script>
+
+<template>
+  <UTable :data="users" :columns="columns" :loading="status === 'pending'" class="flex-1" />
+</template>
diff --git a/docs/app/components/content/examples/table/TableRowActionsExample.vue b/docs/app/components/content/examples/table/TableRowActionsExample.vue
new file mode 100644
index 0000000000..0023368e1a
--- /dev/null
+++ b/docs/app/components/content/examples/table/TableRowActionsExample.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { h, resolveComponent } from 'vue'
+import type { TableColumn } from '@nuxt/ui'
+
+const UBadge = resolveComponent('UBadge')
+
+type Payment = {
+  id: string
+  date: string
+  status: 'paid' | 'failed' | 'refunded'
+  email: string
+  amount: number
+}
+
+const data = ref<Payment[]>([{
+  id: '4600',
+  date: '2024-03-11T15:30:00',
+  status: 'paid',
+  email: 'james.anderson@example.com',
+  amount: 594
+}, {
+  id: '4599',
+  date: '2024-03-11T10:10:00',
+  status: 'failed',
+  email: 'mia.white@example.com',
+  amount: 276
+}, {
+  id: '4598',
+  date: '2024-03-11T08:50:00',
+  status: 'refunded',
+  email: 'william.brown@example.com',
+  amount: 315
+}, {
+  id: '4597',
+  date: '2024-03-10T19:45:00',
+  status: 'paid',
+  email: 'emma.davis@example.com',
+  amount: 529
+}, {
+  id: '4596',
+  date: '2024-03-10T15:55:00',
+  status: 'paid',
+  email: 'ethan.harris@example.com',
+  amount: 639
+}])
+
+const columns: TableColumn<Payment>[] = [{
+  accessorKey: 'id',
+  header: '#',
+  cell: ({ row }) => `#${row.getValue('id')}`
+}, {
+  accessorKey: 'date',
+  header: 'Date',
+  cell: ({ row }) => {
+    return new Date(row.getValue('date')).toLocaleString('en-US', {
+      day: 'numeric',
+      month: 'short',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    })
+  }
+}, {
+  accessorKey: 'status',
+  header: 'Status',
+  cell: ({ row }) => {
+    const color = ({
+      paid: 'success' as const,
+      failed: 'error' as const,
+      refunded: 'neutral' as const
+    })[row.getValue('status') as string]
+
+    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
+  }
+}, {
+  accessorKey: 'email',
+  header: 'Email'
+}, {
+  accessorKey: 'amount',
+  header: () => h('div', { class: 'text-right' }, 'Amount'),
+  cell: ({ row }) => {
+    const amount = Number.parseFloat(row.getValue('amount'))
+
+    const formatted = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'EUR'
+    }).format(amount)
+
+    return h('div', { class: 'text-right font-medium' }, formatted)
+  }
+}]
+</script>
+
+<template>
+  <UTable :data="data" :columns="columns" class="flex-1" />
+</template>
diff --git a/docs/content/3.components/table.md b/docs/content/3.components/table.md
index 0aac37f7de..73804a7259 100644
--- a/docs/content/3.components/table.md
+++ b/docs/content/3.components/table.md
@@ -203,6 +203,16 @@ props:
 
 ### With fetched data
 
+You can fetch data from an API and use them in the Table.
+
+::component-example
+---
+collapse: true
+name: 'table-fetch-example'
+class: '!p-0'
+---
+::
+
 ## API
 
 ### Props
diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
index 867fe2364c..f4587503bb 100644
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -316,7 +316,7 @@ onMounted(() => {
       :data="data"
       :columns="columns"
       :column-pinning="columnPinning"
-      loading
+      :loading="loading"
       sticky
       class="border border-[var(--ui-border-accented)] rounded-[var(--ui-radius)] flex-1"
     >

From be647359b5756e5c7cbd9db758f0f6af2eaf3f62 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 23 Oct 2024 14:54:01 +0200
Subject: [PATCH 23/26] docs(ComponentCode/ComponentExample): handle
 `highlights` prop

---
 docs/app/components/content/ComponentCode.vue    |  9 +++++++--
 docs/app/components/content/ComponentExample.vue | 11 +++++++----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/docs/app/components/content/ComponentCode.vue b/docs/app/components/content/ComponentCode.vue
index 6ac96cae63..e565f32af8 100644
--- a/docs/app/components/content/ComponentCode.vue
+++ b/docs/app/components/content/ComponentCode.vue
@@ -32,6 +32,10 @@ const props = defineProps<{
    * @defaultValue false
    */
   collapse?: boolean
+  /**
+   * A list of line numbers to highlight in the code block
+   */
+  highlights?: number[]
 }>()
 
 const route = useRoute()
@@ -105,7 +109,7 @@ const code = computed(() => {
 `
   }
 
-  code += `\`\`\`vue`
+  code += `\`\`\`vue${props.highlights?.length ? ` {${props.highlights.join('-')}}` : ''}`
 
   if (props.external?.length) {
     code += `
@@ -201,7 +205,8 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
     formatted = await $prettier.format(code.value, {
       trailingComma: 'none',
       semi: false,
-      singleQuote: true
+      singleQuote: true,
+      printWidth: 100
     })
   } catch {
     formatted = code.value
diff --git a/docs/app/components/content/ComponentExample.vue b/docs/app/components/content/ComponentExample.vue
index 8e7a62a7dc..0d2213e261 100644
--- a/docs/app/components/content/ComponentExample.vue
+++ b/docs/app/components/content/ComponentExample.vue
@@ -22,13 +22,11 @@ const props = withDefaults(defineProps<{
    * @defaultValue true
    */
   preview?: boolean
-
   /**
    * Whether to show the source code
    * @defaultValue true
    */
   source?: boolean
-
   /**
    * A list of variable props to link to the component.
    */
@@ -40,6 +38,10 @@ const props = withDefaults(defineProps<{
     default: any
     multiple?: boolean
   }>
+  /**
+   * A list of line numbers to highlight in the code block
+   */
+  highlights?: number[]
 }>(), {
   preview: true,
   source: true
@@ -65,7 +67,7 @@ const code = computed(() => {
 `
   }
 
-  code += `\`\`\`vue${props.preview ? '' : ` [${data.pascalName}.vue]`}
+  code += `\`\`\`vue ${props.preview ? '' : ` [${data.pascalName}.vue]`}${props.highlights?.length ? `{${props.highlights.join('-')}}` : ''}
 ${data?.code ?? ''}
 \`\`\``
 
@@ -87,7 +89,8 @@ const { data: ast } = await useAsyncData(`component-example-${camelName}`, async
     formatted = await $prettier.format(code.value, {
       trailingComma: 'none',
       semi: false,
-      singleQuote: true
+      singleQuote: true,
+      printWidth: 100
     })
   } catch {
     formatted = code.value

From 1c0c4f54e995eed2ca45e09316dd00730892a826 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 23 Oct 2024 14:54:18 +0200
Subject: [PATCH 24/26] up

---
 .../examples/table/TableFetchExample.vue      | 109 +++------------
 .../examples/table/TableRowActionsExample.vue |  45 ++++++-
 .../table/TableRowExpandableExample.vue       | 126 ++++++++++++++++++
 .../table/TableRowSelectionExample.vue        | 106 +++++++++++++++
 docs/content/3.components/table.md            |  74 +++++++++-
 src/runtime/components/Table.vue              |   1 +
 6 files changed, 362 insertions(+), 99 deletions(-)
 create mode 100644 docs/app/components/content/examples/table/TableRowExpandableExample.vue
 create mode 100644 docs/app/components/content/examples/table/TableRowSelectionExample.vue

diff --git a/docs/app/components/content/examples/table/TableFetchExample.vue b/docs/app/components/content/examples/table/TableFetchExample.vue
index 27446d4904..7d76763457 100644
--- a/docs/app/components/content/examples/table/TableFetchExample.vue
+++ b/docs/app/components/content/examples/table/TableFetchExample.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { TableColumn } from '@nuxt/ui'
 
+const UAvatar = resolveComponent('UAvatar')
+
 type User = {
   id: number
   name: string
@@ -20,108 +22,31 @@ const { data: users, status } = await useFetch<User[]>('https://jsonplaceholder.
   lazy: true
 })
 
-const UAvatar = resolveComponent('UAvatar')
-const UButton = resolveComponent('UButton')
-const UCheckbox = resolveComponent('UCheckbox')
-const UBadge = resolveComponent('UBadge')
-const UDropdownMenu = resolveComponent('UDropdownMenu')
-
 const columns: TableColumn<User>[] = [{
-  id: 'select',
-  header: ({ table }) => h(UCheckbox, {
-    'modelValue': table.getIsAllPageRowsSelected(),
-    'indeterminate': table.getIsSomePageRowsSelected(),
-    'onUpdate:modelValue': (value: boolean) => table.toggleAllPageRowsSelected(!!value),
-    'ariaLabel': 'Select all'
-  }),
-  cell: ({ row }) => h(UCheckbox, {
-    'modelValue': row.getIsSelected(),
-    'onUpdate:modelValue': (value: boolean) => row.toggleSelected(!!value),
-    'ariaLabel': 'Select row'
-  }),
-  enableSorting: false,
-  enableHiding: false
-}, {
   accessorKey: 'id',
-  header: '#',
-  cell: ({ row }) => `#${row.getValue('id')}`
+  header: 'ID'
 }, {
   accessorKey: 'name',
   header: 'Name',
   cell: ({ row }) => {
-    // return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
+    return h('div', { class: 'flex items-center gap-3' }, [
+      h(UAvatar, {
+        ...row.original.avatar,
+        size: 'lg'
+      }),
+      h('div', undefined, [
+        h('p', { class: 'font-medium text-[var(--ui-text-highlighted)]' }, row.original.name),
+        h('p', { class: '' }, `@${row.original.username}`)
+      ])
+    ])
   }
 }, {
   accessorKey: 'email',
-  header: ({ column }) => {
-    const isSorted = column.getIsSorted()
-
-    return h(UButton, {
-      color: 'neutral',
-      variant: 'ghost',
-      label: 'Email',
-      icon: isSorted ? (isSorted === 'asc' ? 'i-heroicons-bars-arrow-up-20-solid' : 'i-heroicons-bars-arrow-down-20-solid') : 'i-heroicons-arrows-up-down-20-solid',
-      class: '-mx-2.5',
-      onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
-    })
-  },
-  cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email'))
-}, {
-  accessorKey: 'amount',
-  header: () => h('div', { class: 'text-right' }, 'Amount'),
-  cell: ({ row }) => {
-    const amount = Number.parseFloat(row.getValue('amount'))
-
-    const formatted = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'EUR'
-    }).format(amount)
-
-    return h('div', { class: 'text-right font-medium' }, formatted)
-  }
+  header: 'Email'
 }, {
-  id: 'actions',
-  enableHiding: false,
-  cell: ({ row }) => {
-    const items = [{
-      type: 'label',
-      label: 'Actions'
-    }, {
-      label: 'Copy payment ID',
-      onSelect() {
-        navigator.clipboard.writeText(row.original.id)
-
-        toast.add({
-          title: 'Payment ID copied to clipboard!',
-          color: 'success',
-          icon: 'i-heroicons-check-circle'
-        })
-      }
-    }, {
-      label: row.getIsExpanded() ? 'Collapse' : 'Expand',
-      onSelect() {
-        row.toggleExpanded()
-      }
-    }, {
-      type: 'separator'
-    }, {
-      label: 'View customer'
-    }, {
-      label: 'View payment details'
-    }]
-
-    return h('div', { class: 'text-right' }, h(UDropdownMenu, {
-      content: {
-        align: 'end'
-      },
-      items
-    }, () => h(UButton, {
-      icon: 'i-heroicons-ellipsis-vertical-20-solid',
-      color: 'neutral',
-      variant: 'ghost',
-      class: 'ml-auto'
-    })))
-  }
+  accessorKey: 'company',
+  header: 'Company',
+  cell: ({ row }) => row.original.company.name
 }]
 </script>
 
diff --git a/docs/app/components/content/examples/table/TableRowActionsExample.vue b/docs/app/components/content/examples/table/TableRowActionsExample.vue
index 0023368e1a..1ab921a60a 100644
--- a/docs/app/components/content/examples/table/TableRowActionsExample.vue
+++ b/docs/app/components/content/examples/table/TableRowActionsExample.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
 import { h, resolveComponent } from 'vue'
-import type { TableColumn } from '@nuxt/ui'
+import type { TableColumn, TableRow } from '@nuxt/ui'
 
+const UButton = resolveComponent('UButton')
 const UBadge = resolveComponent('UBadge')
+const UDropdownMenu = resolveComponent('UDropdownMenu')
+
+const toast = useToast()
 
 type Payment = {
   id: string
@@ -88,7 +92,46 @@ const columns: TableColumn<Payment>[] = [{
 
     return h('div', { class: 'text-right font-medium' }, formatted)
   }
+}, {
+  id: 'actions',
+  cell: ({ row }) => {
+    return h('div', { class: 'text-right' }, h(UDropdownMenu, {
+      content: {
+        align: 'end'
+      },
+      items: getRowItems(row)
+    }, () => h(UButton, {
+      icon: 'i-heroicons-ellipsis-vertical-20-solid',
+      color: 'neutral',
+      variant: 'ghost',
+      class: 'ml-auto'
+    })))
+  }
 }]
+
+function getRowItems(row: TableRow<Payment>) {
+  return [{
+    type: 'label',
+    label: 'Actions'
+  }, {
+    label: 'Copy payment ID',
+    onSelect() {
+      navigator.clipboard.writeText(row.original.id)
+
+      toast.add({
+        title: 'Payment ID copied to clipboard!',
+        color: 'success',
+        icon: 'i-heroicons-check-circle'
+      })
+    }
+  }, {
+    type: 'separator'
+  }, {
+    label: 'View customer'
+  }, {
+    label: 'View payment details'
+  }]
+}
 </script>
 
 <template>
diff --git a/docs/app/components/content/examples/table/TableRowExpandableExample.vue b/docs/app/components/content/examples/table/TableRowExpandableExample.vue
new file mode 100644
index 0000000000..005b3707f3
--- /dev/null
+++ b/docs/app/components/content/examples/table/TableRowExpandableExample.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { h, resolveComponent } from 'vue'
+import type { TableColumn, TableRow } from '@nuxt/ui'
+
+const UButton = resolveComponent('UButton')
+const UBadge = resolveComponent('UBadge')
+const UDropdownMenu = resolveComponent('UDropdownMenu')
+
+type Payment = {
+  id: string
+  date: string
+  status: 'paid' | 'failed' | 'refunded'
+  email: string
+  amount: number
+}
+
+const data = ref<Payment[]>([{
+  id: '4600',
+  date: '2024-03-11T15:30:00',
+  status: 'paid',
+  email: 'james.anderson@example.com',
+  amount: 594
+}, {
+  id: '4599',
+  date: '2024-03-11T10:10:00',
+  status: 'failed',
+  email: 'mia.white@example.com',
+  amount: 276
+}, {
+  id: '4598',
+  date: '2024-03-11T08:50:00',
+  status: 'refunded',
+  email: 'william.brown@example.com',
+  amount: 315
+}, {
+  id: '4597',
+  date: '2024-03-10T19:45:00',
+  status: 'paid',
+  email: 'emma.davis@example.com',
+  amount: 529
+}, {
+  id: '4596',
+  date: '2024-03-10T15:55:00',
+  status: 'paid',
+  email: 'ethan.harris@example.com',
+  amount: 639
+}])
+
+const columns: TableColumn<Payment>[] = [{
+  accessorKey: 'id',
+  header: '#',
+  cell: ({ row }) => `#${row.getValue('id')}`
+}, {
+  accessorKey: 'date',
+  header: 'Date',
+  cell: ({ row }) => {
+    return new Date(row.getValue('date')).toLocaleString('en-US', {
+      day: 'numeric',
+      month: 'short',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    })
+  }
+}, {
+  accessorKey: 'status',
+  header: 'Status',
+  cell: ({ row }) => {
+    const color = ({
+      paid: 'success' as const,
+      failed: 'error' as const,
+      refunded: 'neutral' as const
+    })[row.getValue('status') as string]
+
+    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
+  }
+}, {
+  accessorKey: 'email',
+  header: 'Email'
+}, {
+  accessorKey: 'amount',
+  header: () => h('div', { class: 'text-right' }, 'Amount'),
+  cell: ({ row }) => {
+    const amount = Number.parseFloat(row.getValue('amount'))
+
+    const formatted = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'EUR'
+    }).format(amount)
+
+    return h('div', { class: 'text-right font-medium' }, formatted)
+  }
+}, {
+  id: 'actions',
+  cell: ({ row }) => {
+    return h('div', { class: 'text-right' }, h(UDropdownMenu, {
+      content: {
+        align: 'end'
+      },
+      items: getRowItems(row)
+    }, () => h(UButton, {
+      icon: 'i-heroicons-ellipsis-vertical-20-solid',
+      color: 'neutral',
+      variant: 'ghost',
+      class: 'ml-auto'
+    })))
+  }
+}]
+
+function getRowItems(row: TableRow<Payment>) {
+  return [{
+    label: row.getIsExpanded() ? 'Collapse' : 'Expand',
+    onSelect() {
+      row.toggleExpanded()
+    }
+  }]
+}
+</script>
+
+<template>
+  <UTable :data="data" :columns="columns" class="flex-1">
+    <template #expanded="{ row }">
+      <pre>{{ row.original }}</pre>
+    </template>
+  </UTable>
+</template>
diff --git a/docs/app/components/content/examples/table/TableRowSelectionExample.vue b/docs/app/components/content/examples/table/TableRowSelectionExample.vue
new file mode 100644
index 0000000000..0f9f41e9f3
--- /dev/null
+++ b/docs/app/components/content/examples/table/TableRowSelectionExample.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { h, resolveComponent } from 'vue'
+import type { TableColumn } from '@nuxt/ui'
+
+const UCheckbox = resolveComponent('UCheckbox')
+const UBadge = resolveComponent('UBadge')
+
+type Payment = {
+  id: string
+  date: string
+  status: 'paid' | 'failed' | 'refunded'
+  email: string
+  amount: number
+}
+
+const data = ref<Payment[]>([{
+  id: '4600',
+  date: '2024-03-11T15:30:00',
+  status: 'paid',
+  email: 'james.anderson@example.com',
+  amount: 594
+}, {
+  id: '4599',
+  date: '2024-03-11T10:10:00',
+  status: 'failed',
+  email: 'mia.white@example.com',
+  amount: 276
+}, {
+  id: '4598',
+  date: '2024-03-11T08:50:00',
+  status: 'refunded',
+  email: 'william.brown@example.com',
+  amount: 315
+}, {
+  id: '4597',
+  date: '2024-03-10T19:45:00',
+  status: 'paid',
+  email: 'emma.davis@example.com',
+  amount: 529
+}, {
+  id: '4596',
+  date: '2024-03-10T15:55:00',
+  status: 'paid',
+  email: 'ethan.harris@example.com',
+  amount: 639
+}])
+
+const columns: TableColumn<Payment>[] = [{
+  id: 'select',
+  header: ({ table }) => h(UCheckbox, {
+    'modelValue': table.getIsAllPageRowsSelected(),
+    'indeterminate': table.getIsSomePageRowsSelected(),
+    'onUpdate:modelValue': (value: boolean) => table.toggleAllPageRowsSelected(!!value),
+    'ariaLabel': 'Select all'
+  }),
+  cell: ({ row }) => h(UCheckbox, {
+    'modelValue': row.getIsSelected(),
+    'onUpdate:modelValue': (value: boolean) => row.toggleSelected(!!value),
+    'ariaLabel': 'Select row'
+  })
+}, {
+  accessorKey: 'date',
+  header: 'Date',
+  cell: ({ row }) => {
+    return new Date(row.getValue('date')).toLocaleString('en-US', {
+      day: 'numeric',
+      month: 'short',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    })
+  }
+}, {
+  accessorKey: 'status',
+  header: 'Status',
+  cell: ({ row }) => {
+    const color = ({
+      paid: 'success' as const,
+      failed: 'error' as const,
+      refunded: 'neutral' as const
+    })[row.getValue('status') as string]
+
+    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
+  }
+}, {
+  accessorKey: 'email',
+  header: 'Email'
+}, {
+  accessorKey: 'amount',
+  header: () => h('div', { class: 'text-right' }, 'Amount'),
+  cell: ({ row }) => {
+    const amount = Number.parseFloat(row.getValue('amount'))
+
+    const formatted = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'EUR'
+    }).format(amount)
+
+    return h('div', { class: 'text-right font-medium' }, formatted)
+  }
+}]
+</script>
+
+<template>
+  <UTable :data="data" :columns="columns" class="flex-1" />
+</template>
diff --git a/docs/content/3.components/table.md b/docs/content/3.components/table.md
index 73804a7259..cce2a3e726 100644
--- a/docs/content/3.components/table.md
+++ b/docs/content/3.components/table.md
@@ -66,7 +66,7 @@ Use the `columns` prop as an array of [ColumnDef](https://tanstack.com/table/lat
 - `header`: [The header to display for the column. If a string is passed, it can be used as a default for the column ID. If a function is passed, it will be passed a props object for the header and should return the rendered header value (the exact type depends on the adapter being used).]{class="text-[var(--ui-text-muted)]"}
 - `cell`: [The cell to display each row for the column. If a function is passed, it will be passed a props object for the cell and should return the rendered cell value (the exact type depends on the adapter being used).]{class="text-[var(--ui-text-muted)]"}
 
-You can take advantage of the Vue [`h` function](https://vuejs.org/api/render-function.html#h) to render components or other HTML elements.
+In order to render components or other HTML elements, you will need to use the Vue [`h` function](https://vuejs.org/api/render-function.html#h) inside the `header` and `cell` props. This is different from other components that use slots but allows for more flexibility.
 
 ::component-example
 ---
@@ -74,11 +74,14 @@ prettier: true
 collapse: true
 class: '!p-0'
 name: 'table-columns-example'
+highlights:
+  - 53
+  - 105
 ---
 ::
 
-::warning
-Make sure to use `resolveComponent` when rendering components using the `h` function.
+::tip
+When rendering components with the `h` function, you can utilize the `resolveComponent` function to dynamically resolve and reference components.
 ::
 
 ### Loading
@@ -185,18 +188,76 @@ props:
 
 ## Examples
 
+### With row selection
+
+You can add a new column that renders a [Checkbox](/components/checkbox) component inside the `header` and `cell` to select rows.
+
+::component-example
+---
+prettier: true
+collapse: true
+name: 'table-row-selection-example'
+highlights:
+  - 55
+  - 70
+class: '!p-0'
+---
+::
+
+::note{to="https://tanstack.com/table/latest/docs/api/features/row-selection" target="_blank"}
+This example uses the Row Selection APIs from TanStack Table:
+
+- `table.getIsAllPageRowsSelected()`
+- `table.getIsSomePageRowsSelected()`
+- `table.toggleAllPageRowsSelected()`
+- `row.getIsSelected()`
+- `row.toggleSelected()`
+::
+
 ### With row actions
 
-### With row selection
+You can add a new column that renders a [DropdownMenu](/components/dropdown-menu) component inside the `cell` to render row actions.
+
+::component-example
+---
+prettier: true
+collapse: true
+name: 'table-row-actions-example'
+highlights:
+  - 109
+  - 133
+class: '!p-0'
+---
+::
 
 ### With expandable rows
 
-### With column pinning
+You can control the expandable state of a row using the `row.getIsExpanded()`{lang="ts-type"} and `row.toggleExpanded()`{lang="ts-type"} methods using the TanStack Table [Expanding APIs](https://tanstack.com/table/latest/docs/api/features/expanding).
 
-### With column visibility
+You need to define the `#expanded` slot to render the expanded content which will receive the row as a parameter.
+
+::component-example
+---
+prettier: true
+collapse: true
+name: 'table-row-expandable-example'
+highlights:
+  - 135
+  - 142
+class: '!p-0'
+---
+::
+
+::note
+In this example, the `Expand/Collapse` action is added to the [DropdownMenu](/components/dropdown-menu) component inside the `actions` column.
+::
 
 ### With column sorting
 
+### With column visibility
+
+### With column pinning
+
 ### With column filtering
 
 ### With global filtering
@@ -207,6 +268,7 @@ You can fetch data from an API and use them in the Table.
 
 ::component-example
 ---
+prettier: true
 collapse: true
 name: 'table-fetch-example'
 class: '!p-0'
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index a84bf0969a..e8cca73020 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -31,6 +31,7 @@ const table = tv({ extend: tv(theme), ...(appConfig.ui?.table || {}) })
 type TableVariants = VariantProps<typeof table>
 
 export type TableColumn<T> = ColumnDef<T>
+export type TableRow<T> = Row<T>
 
 export interface TableData {
   [key: string]: any

From e27d36f499f0b1820fea9af4b361af48935dba92 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 23 Oct 2024 17:25:20 +0200
Subject: [PATCH 25/26] up

---
 .../components/content/ComponentExample.vue   |   4 +-
 .../table/TableColumnFiltersExample.vue       | 119 +++++++
 .../table/TableColumnPinningExample.vue       | 114 +++++++
 .../table/TableColumnSortingExample.vue       | 118 +++++++
 .../TableColumnSortingReusableExample.vue     | 150 ++++++++
 .../table/TableColumnVisibilityExample.vue    | 134 ++++++++
 .../content/examples/table/TableExample.vue   | 319 ++++++++++++++++++
 .../examples/table/TableFetchExample.vue      |   4 +-
 .../table/TableGlobalFilterExample.vue        | 115 +++++++
 .../examples/table/TableRowActionsExample.vue |   5 +-
 .../table/TableRowExpandableExample.vue       |  47 ++-
 .../table/TableRowSelectionExample.vue        |  18 +-
 docs/content/3.components/table.md            | 173 ++++++++--
 docs/package.json                             |   2 +-
 playground/app/pages/components/table.vue     |   2 +-
 pnpm-lock.yaml                                |  12 +-
 src/runtime/components/Table.vue              |   3 +-
 src/theme/table.ts                            |   2 +-
 18 files changed, 1273 insertions(+), 68 deletions(-)
 create mode 100644 docs/app/components/content/examples/table/TableColumnFiltersExample.vue
 create mode 100644 docs/app/components/content/examples/table/TableColumnPinningExample.vue
 create mode 100644 docs/app/components/content/examples/table/TableColumnSortingExample.vue
 create mode 100644 docs/app/components/content/examples/table/TableColumnSortingReusableExample.vue
 create mode 100644 docs/app/components/content/examples/table/TableColumnVisibilityExample.vue
 create mode 100644 docs/app/components/content/examples/table/TableExample.vue
 create mode 100644 docs/app/components/content/examples/table/TableGlobalFilterExample.vue

diff --git a/docs/app/components/content/ComponentExample.vue b/docs/app/components/content/ComponentExample.vue
index 0d2213e261..c19206d352 100644
--- a/docs/app/components/content/ComponentExample.vue
+++ b/docs/app/components/content/ComponentExample.vue
@@ -116,7 +116,7 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
 
 <template>
   <div class="my-5">
-    <div v-if="preview">
+    <template v-if="preview">
       <div class="border border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] relative z-[1]" :class="[{ 'border-b-0 rounded-t-[calc(var(--ui-radius)*1.5)]': props.source, 'rounded-[calc(var(--ui-radius)*1.5)]': !props.source }]">
         <div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)]">
           <slot name="options" />
@@ -173,7 +173,7 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
           <component :is="camelName" v-bind="{ ...componentProps, ...optionsValues }" />
         </div>
       </div>
-    </div>
+    </template>
 
     <MDCRenderer v-if="ast && props.source" :body="ast.body" :data="ast.data" class="[&_pre]:!rounded-t-none [&_div.my-5]:!mt-0" />
   </div>
diff --git a/docs/app/components/content/examples/table/TableColumnFiltersExample.vue b/docs/app/components/content/examples/table/TableColumnFiltersExample.vue
new file mode 100644
index 0000000000..d21470c863
--- /dev/null
+++ b/docs/app/components/content/examples/table/TableColumnFiltersExample.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { h, resolveComponent } from 'vue'
+import type { TableColumn } from '@nuxt/ui'
+
+const UBadge = resolveComponent('UBadge')
+
+type Payment = {
+  id: string
+  date: string
+  status: 'paid' | 'failed' | 'refunded'
+  email: string
+  amount: number
+}
+
+const data = ref<Payment[]>([{
+  id: '4600',
+  date: '2024-03-11T15:30:00',
+  status: 'paid',
+  email: 'james.anderson@example.com',
+  amount: 594
+}, {
+  id: '4599',
+  date: '2024-03-11T10:10:00',
+  status: 'failed',
+  email: 'mia.white@example.com',
+  amount: 276
+}, {
+  id: '4598',
+  date: '2024-03-11T08:50:00',
+  status: 'refunded',
+  email: 'william.brown@example.com',
+  amount: 315
+}, {
+  id: '4597',
+  date: '2024-03-10T19:45:00',
+  status: 'paid',
+  email: 'emma.davis@example.com',
+  amount: 529
+}, {
+  id: '4596',
+  date: '2024-03-10T15:55:00',
+  status: 'paid',
+  email: 'ethan.harris@example.com',
+  amount: 639
+}])
+
+const columns: TableColumn<Payment>[] = [{
+  accessorKey: 'id',
+  header: '#',
+  cell: ({ row }) => `#${row.getValue('id')}`
+}, {
+  accessorKey: 'date',
+  header: 'Date',
+  cell: ({ row }) => {
+    return new Date(row.getValue('date')).toLocaleString('en-US', {
+      day: 'numeric',
+      month: 'short',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    })
+  }
+}, {
+  accessorKey: 'status',
+  header: 'Status',
+  cell: ({ row }) => {
+    const color = ({
+      paid: 'success' as const,
+      failed: 'error' as const,
+      refunded: 'neutral' as const
+    })[row.getValue('status') as string]
+
+    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
+  }
+}, {
+  accessorKey: 'email',
+  header: 'Email'
+}, {
+  accessorKey: 'amount',
+  header: () => h('div', { class: 'text-right' }, 'Amount'),
+  cell: ({ row }) => {
+    const amount = Number.parseFloat(row.getValue('amount'))
+
+    const formatted = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'EUR'
+    }).format(amount)
+
+    return h('div', { class: 'text-right font-medium' }, formatted)
+  }
+}]
+
+const table = useTemplateRef('table')
+
+const columnFilters = ref([{
+  id: 'email',
+  value: 'james'
+}])
+</script>
+
+<template>
+  <div class="flex flex-col flex-1">
+    <div class="flex px-4 py-3.5 border-b border-[var(--ui-border-accented)]">
+      <UInput
+        :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
+        class="max-w-sm"
+        placeholder="Filter emails..."
+        @update:model-value="table?.tableApi?.getColumn('email')?.setFilterValue($event)"
+      />
+    </div>
+
+    <UTable
+      ref="table"
+      v-model:column-filters="columnFilters"
+      :data="data"
+      :columns="columns"
+    />
+  </div>
+</template>
diff --git a/docs/app/components/content/examples/table/TableColumnPinningExample.vue b/docs/app/components/content/examples/table/TableColumnPinningExample.vue
new file mode 100644
index 0000000000..443ec20df8
--- /dev/null
+++ b/docs/app/components/content/examples/table/TableColumnPinningExample.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { h, resolveComponent } from 'vue'
+import type { TableColumn } from '@nuxt/ui'
+import type { Column } from '@tanstack/vue-table'
+
+const UBadge = resolveComponent('UBadge')
+const UButton = resolveComponent('UButton')
+
+type Payment = {
+  id: string
+  date: string
+  status: 'paid' | 'failed' | 'refunded'
+  email: string
+  amount: number
+}
+
+const data = ref<Payment[]>([{
+  id: '46000000000000000000000000000000000000000',
+  date: '2024-03-11T15:30:00',
+  status: 'paid',
+  email: 'james.anderson@example.com',
+  amount: 594000
+}, {
+  id: '45990000000000000000000000000000000000000',
+  date: '2024-03-11T10:10:00',
+  status: 'failed',
+  email: 'mia.white@example.com',
+  amount: 276000
+}, {
+  id: '45980000000000000000000000000000000000000',
+  date: '2024-03-11T08:50:00',
+  status: 'refunded',
+  email: 'william.brown@example.com',
+  amount: 315000
+}, {
+  id: '45970000000000000000000000000000000000000',
+  date: '2024-03-10T19:45:00',
+  status: 'paid',
+  email: 'emma.davis@example.com',
+  amount: 5290000
+}, {
+  id: '45960000000000000000000000000000000000000',
+  date: '2024-03-10T15:55:00',
+  status: 'paid',
+  email: 'ethan.harris@example.com',
+  amount: 639000
+}])
+
+const columns: TableColumn<Payment>[] = [{
+  accessorKey: 'id',
+  header: ({ column }) => getHeader(column, 'ID', 'left'),
+  cell: ({ row }) => `#${row.getValue('id')}`
+}, {
+  accessorKey: 'date',
+  header: ({ column }) => getHeader(column, 'Date', 'left')
+}, {
+  accessorKey: 'status',
+  header: ({ column }) => getHeader(column, 'Status', 'left'),
+  cell: ({ row }) => {
+    const color = ({
+      paid: 'success' as const,
+      failed: 'error' as const,
+      refunded: 'neutral' as const
+    })[row.getValue('status') as string]
+
+    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
+  }
+}, {
+  accessorKey: 'email',
+  header: ({ column }) => getHeader(column, 'Email', 'left')
+}, {
+  accessorKey: 'amount',
+  header: ({ column }) => h('div', { class: 'text-right' }, getHeader(column, 'Amount', 'right')),
+  cell: ({ row }) => {
+    const amount = Number.parseFloat(row.getValue('amount'))
+
+    const formatted = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'EUR'
+    }).format(amount)
+
+    return h('div', { class: 'text-right font-medium' }, formatted)
+  }
+}]
+
+function getHeader(column: Column<Payment>, label: string, position: 'left' | 'right') {
+  const isPinned = column.getIsPinned()
+
+  return h(UButton, {
+    color: 'neutral',
+    variant: 'ghost',
+    label,
+    icon: isPinned ? 'i-heroicons-star-20-solid' : 'i-heroicons-star',
+    class: '-mx-2.5',
+    onClick() {
+      column.pin(isPinned === position ? false : position)
+    }
+  })
+}
+
+const columnPinning = ref({
+  left: [],
+  right: ['amount']
+})
+</script>
+
+<template>
+  <UTable
+    v-model:column-pinning="columnPinning"
+    :data="data"
+    :columns="columns"
+    class="flex-1"
+  />
+</template>
diff --git a/docs/app/components/content/examples/table/TableColumnSortingExample.vue b/docs/app/components/content/examples/table/TableColumnSortingExample.vue
new file mode 100644
index 0000000000..f5dfdbdf53
--- /dev/null
+++ b/docs/app/components/content/examples/table/TableColumnSortingExample.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { h, resolveComponent } from 'vue'
+import type { TableColumn } from '@nuxt/ui'
+
+const UBadge = resolveComponent('UBadge')
+const UButton = resolveComponent('UButton')
+
+type Payment = {
+  id: string
+  date: string
+  status: 'paid' | 'failed' | 'refunded'
+  email: string
+  amount: number
+}
+
+const data = ref<Payment[]>([{
+  id: '4600',
+  date: '2024-03-11T15:30:00',
+  status: 'paid',
+  email: 'james.anderson@example.com',
+  amount: 594
+}, {
+  id: '4599',
+  date: '2024-03-11T10:10:00',
+  status: 'failed',
+  email: 'mia.white@example.com',
+  amount: 276
+}, {
+  id: '4598',
+  date: '2024-03-11T08:50:00',
+  status: 'refunded',
+  email: 'william.brown@example.com',
+  amount: 315
+}, {
+  id: '4597',
+  date: '2024-03-10T19:45:00',
+  status: 'paid',
+  email: 'emma.davis@example.com',
+  amount: 529
+}, {
+  id: '4596',
+  date: '2024-03-10T15:55:00',
+  status: 'paid',
+  email: 'ethan.harris@example.com',
+  amount: 639
+}])
+
+const columns: TableColumn<Payment>[] = [{
+  accessorKey: 'id',
+  header: '#',
+  cell: ({ row }) => `#${row.getValue('id')}`
+}, {
+  accessorKey: 'date',
+  header: 'Date',
+  cell: ({ row }) => {
+    return new Date(row.getValue('date')).toLocaleString('en-US', {
+      day: 'numeric',
+      month: 'short',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    })
+  }
+}, {
+  accessorKey: 'status',
+  header: 'Status',
+  cell: ({ row }) => {
+    const color = ({
+      paid: 'success' as const,
+      failed: 'error' as const,
+      refunded: 'neutral' as const
+    })[row.getValue('status') as string]
+
+    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
+  }
+}, {
+  accessorKey: 'email',
+  header: ({ column }) => {
+    const isSorted = column.getIsSorted()
+
+    return h(UButton, {
+      color: 'neutral',
+      variant: 'ghost',
+      label: 'Email',
+      icon: isSorted ? (isSorted === 'asc' ? 'i-heroicons-bars-arrow-up-20-solid' : 'i-heroicons-bars-arrow-down-20-solid') : 'i-heroicons-arrows-up-down-20-solid',
+      class: '-mx-2.5',
+      onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
+    })
+  }
+}, {
+  accessorKey: 'amount',
+  header: () => h('div', { class: 'text-right' }, 'Amount'),
+  cell: ({ row }) => {
+    const amount = Number.parseFloat(row.getValue('amount'))
+
+    const formatted = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'EUR'
+    }).format(amount)
+
+    return h('div', { class: 'text-right font-medium' }, formatted)
+  }
+}]
+
+const sorting = ref([{
+  id: 'email',
+  desc: false
+}])
+</script>
+
+<template>
+  <UTable
+    v-model:sorting="sorting"
+    :data="data"
+    :columns="columns"
+    class="flex-1"
+  />
+</template>
diff --git a/docs/app/components/content/examples/table/TableColumnSortingReusableExample.vue b/docs/app/components/content/examples/table/TableColumnSortingReusableExample.vue
new file mode 100644
index 0000000000..ab10636709
--- /dev/null
+++ b/docs/app/components/content/examples/table/TableColumnSortingReusableExample.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { h, resolveComponent } from 'vue'
+import type { TableColumn } from '@nuxt/ui'
+import type { Column } from '@tanstack/vue-table'
+
+const UBadge = resolveComponent('UBadge')
+const UButton = resolveComponent('UButton')
+const UDropdownMenu = resolveComponent('UDropdownMenu')
+
+type Payment = {
+  id: string
+  date: string
+  status: 'paid' | 'failed' | 'refunded'
+  email: string
+  amount: number
+}
+
+const data = ref<Payment[]>([{
+  id: '4600',
+  date: '2024-03-11T15:30:00',
+  status: 'paid',
+  email: 'james.anderson@example.com',
+  amount: 594
+}, {
+  id: '4599',
+  date: '2024-03-11T10:10:00',
+  status: 'failed',
+  email: 'mia.white@example.com',
+  amount: 276
+}, {
+  id: '4598',
+  date: '2024-03-11T08:50:00',
+  status: 'refunded',
+  email: 'william.brown@example.com',
+  amount: 315
+}, {
+  id: '4597',
+  date: '2024-03-10T19:45:00',
+  status: 'paid',
+  email: 'emma.davis@example.com',
+  amount: 529
+}, {
+  id: '4596',
+  date: '2024-03-10T15:55:00',
+  status: 'paid',
+  email: 'ethan.harris@example.com',
+  amount: 639
+}])
+
+const columns: TableColumn<Payment>[] = [{
+  accessorKey: 'id',
+  header: ({ column }) => getHeader(column, 'ID'),
+  cell: ({ row }) => `#${row.getValue('id')}`
+}, {
+  accessorKey: 'date',
+  header: ({ column }) => getHeader(column, 'Date'),
+  cell: ({ row }) => {
+    return new Date(row.getValue('date')).toLocaleString('en-US', {
+      day: 'numeric',
+      month: 'short',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    })
+  }
+}, {
+  accessorKey: 'status',
+  header: ({ column }) => getHeader(column, 'Status'),
+  cell: ({ row }) => {
+    const color = ({
+      paid: 'success' as const,
+      failed: 'error' as const,
+      refunded: 'neutral' as const
+    })[row.getValue('status') as string]
+
+    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
+  }
+}, {
+  accessorKey: 'email',
+  header: ({ column }) => getHeader(column, 'Email')
+}, {
+  accessorKey: 'amount',
+  header: ({ column }) => h('div', { class: 'text-right' }, getHeader(column, 'Amount')),
+  cell: ({ row }) => {
+    const amount = Number.parseFloat(row.getValue('amount'))
+
+    const formatted = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'EUR'
+    }).format(amount)
+
+    return h('div', { class: 'text-right font-medium' }, formatted)
+  }
+}]
+
+function getHeader(column: Column<Payment>, label: string) {
+  const isSorted = column.getIsSorted()
+
+  return h(UDropdownMenu, {
+    content: {
+      align: 'start'
+    },
+    items: [{
+      label: 'Asc',
+      type: 'checkbox',
+      icon: 'i-heroicons-bars-arrow-up-20-solid',
+      checked: isSorted === 'asc',
+      onSelect: () => {
+        if (isSorted === 'asc') {
+          column.clearSorting()
+        } else {
+          column.toggleSorting(false)
+        }
+      }
+    }, {
+      label: 'Desc',
+      icon: 'i-heroicons-bars-arrow-down-20-solid',
+      type: 'checkbox',
+      checked: isSorted === 'desc',
+      onSelect: () => {
+        if (isSorted === 'desc') {
+          column.clearSorting()
+        } else {
+          column.toggleSorting(true)
+        }
+      }
+    }]
+  }, () => h(UButton, {
+    color: 'neutral',
+    variant: 'ghost',
+    label,
+    icon: isSorted ? (isSorted === 'asc' ? 'i-heroicons-bars-arrow-up-20-solid' : 'i-heroicons-bars-arrow-down-20-solid') : 'i-heroicons-arrows-up-down-20-solid',
+    class: '-mx-2.5 data-[state=open]:bg-[var(--ui-bg-elevated)]'
+  }))
+}
+
+const sorting = ref([{
+  id: 'id',
+  desc: false
+}])
+</script>
+
+<template>
+  <UTable
+    v-model:sorting="sorting"
+    :data="data"
+    :columns="columns"
+    class="flex-1"
+  />
+</template>
diff --git a/docs/app/components/content/examples/table/TableColumnVisibilityExample.vue b/docs/app/components/content/examples/table/TableColumnVisibilityExample.vue
new file mode 100644
index 0000000000..0695e249c2
--- /dev/null
+++ b/docs/app/components/content/examples/table/TableColumnVisibilityExample.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { h, resolveComponent } from 'vue'
+import { upperFirst } from 'scule'
+import type { TableColumn } from '@nuxt/ui'
+
+const UBadge = resolveComponent('UBadge')
+
+type Payment = {
+  id: string
+  date: string
+  status: 'paid' | 'failed' | 'refunded'
+  email: string
+  amount: number
+}
+
+const data = ref<Payment[]>([{
+  id: '4600',
+  date: '2024-03-11T15:30:00',
+  status: 'paid',
+  email: 'james.anderson@example.com',
+  amount: 594
+}, {
+  id: '4599',
+  date: '2024-03-11T10:10:00',
+  status: 'failed',
+  email: 'mia.white@example.com',
+  amount: 276
+}, {
+  id: '4598',
+  date: '2024-03-11T08:50:00',
+  status: 'refunded',
+  email: 'william.brown@example.com',
+  amount: 315
+}, {
+  id: '4597',
+  date: '2024-03-10T19:45:00',
+  status: 'paid',
+  email: 'emma.davis@example.com',
+  amount: 529
+}, {
+  id: '4596',
+  date: '2024-03-10T15:55:00',
+  status: 'paid',
+  email: 'ethan.harris@example.com',
+  amount: 639
+}])
+
+const columns: TableColumn<Payment>[] = [{
+  accessorKey: 'id',
+  header: '#',
+  cell: ({ row }) => `#${row.getValue('id')}`
+}, {
+  accessorKey: 'date',
+  header: 'Date',
+  cell: ({ row }) => {
+    return new Date(row.getValue('date')).toLocaleString('en-US', {
+      day: 'numeric',
+      month: 'short',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    })
+  }
+}, {
+  accessorKey: 'status',
+  header: 'Status',
+  cell: ({ row }) => {
+    const color = ({
+      paid: 'success' as const,
+      failed: 'error' as const,
+      refunded: 'neutral' as const
+    })[row.getValue('status') as string]
+
+    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
+  }
+}, {
+  accessorKey: 'email',
+  header: 'Email'
+}, {
+  accessorKey: 'amount',
+  header: () => h('div', { class: 'text-right' }, 'Amount'),
+  cell: ({ row }) => {
+    const amount = Number.parseFloat(row.getValue('amount'))
+
+    const formatted = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'EUR'
+    }).format(amount)
+
+    return h('div', { class: 'text-right font-medium' }, formatted)
+  }
+}]
+
+const table = useTemplateRef('table')
+
+const columnVisibility = ref({
+  id: false
+})
+</script>
+
+<template>
+  <div class="flex flex-col flex-1">
+    <div class="flex justify-end px-4 py-3.5 border-b  border-[var(--ui-border-accented)]">
+      <UDropdownMenu
+        :items="table?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
+          label: upperFirst(column.id),
+          type: 'checkbox' as const,
+          checked: column.getIsVisible(),
+          onUpdateChecked(checked: boolean) {
+            table?.tableApi?.getColumn(column.id)?.toggleVisibility(!!checked)
+          },
+          onSelect(e?: Event) {
+            e?.preventDefault()
+          }
+        }))"
+        :content="{ align: 'end' }"
+      >
+        <UButton
+          label="Columns"
+          color="neutral"
+          variant="outline"
+          trailing-icon="i-heroicons-chevron-down-20-solid"
+        />
+      </UDropdownMenu>
+    </div>
+
+    <UTable
+      ref="table"
+      v-model:column-visibility="columnVisibility"
+      :data="data"
+      :columns="columns"
+    />
+  </div>
+</template>
diff --git a/docs/app/components/content/examples/table/TableExample.vue b/docs/app/components/content/examples/table/TableExample.vue
new file mode 100644
index 0000000000..5d1abd0c59
--- /dev/null
+++ b/docs/app/components/content/examples/table/TableExample.vue
@@ -0,0 +1,319 @@
+<script setup lang="ts">
+import { h, resolveComponent } from 'vue'
+import { upperFirst } from 'scule'
+import type { TableColumn } from '@nuxt/ui'
+
+const UButton = resolveComponent('UButton')
+const UCheckbox = resolveComponent('UCheckbox')
+const UBadge = resolveComponent('UBadge')
+const UDropdownMenu = resolveComponent('UDropdownMenu')
+
+const toast = useToast()
+
+type Payment = {
+  id: string
+  date: string
+  status: 'paid' | 'failed' | 'refunded'
+  email: string
+  amount: number
+}
+
+const data = ref<Payment[]>([{
+  id: '4600',
+  date: '2024-03-11T15:30:00',
+  status: 'paid',
+  email: 'james.anderson@example.com',
+  amount: 594
+}, {
+  id: '4599',
+  date: '2024-03-11T10:10:00',
+  status: 'failed',
+  email: 'mia.white@example.com',
+  amount: 276
+}, {
+  id: '4598',
+  date: '2024-03-11T08:50:00',
+  status: 'refunded',
+  email: 'william.brown@example.com',
+  amount: 315
+}, {
+  id: '4597',
+  date: '2024-03-10T19:45:00',
+  status: 'paid',
+  email: 'emma.davis@example.com',
+  amount: 529
+}, {
+  id: '4596',
+  date: '2024-03-10T15:55:00',
+  status: 'paid',
+  email: 'ethan.harris@example.com',
+  amount: 639
+}, {
+  id: '4595',
+  date: '2024-03-10T13:40:00',
+  status: 'refunded',
+  email: 'ava.thomas@example.com',
+  amount: 428
+}, {
+  id: '4594',
+  date: '2024-03-10T09:15:00',
+  status: 'paid',
+  email: 'michael.wilson@example.com',
+  amount: 683
+}, {
+  id: '4593',
+  date: '2024-03-09T20:25:00',
+  status: 'failed',
+  email: 'olivia.taylor@example.com',
+  amount: 947
+}, {
+  id: '4592',
+  date: '2024-03-09T18:45:00',
+  status: 'paid',
+  email: 'benjamin.jackson@example.com',
+  amount: 851
+}, {
+  id: '4591',
+  date: '2024-03-09T16:05:00',
+  status: 'paid',
+  email: 'sophia.miller@example.com',
+  amount: 762
+}, {
+  id: '4590',
+  date: '2024-03-09T14:20:00',
+  status: 'paid',
+  email: 'noah.clark@example.com',
+  amount: 573
+}, {
+  id: '4589',
+  date: '2024-03-09T11:35:00',
+  status: 'failed',
+  email: 'isabella.lee@example.com',
+  amount: 389
+}, {
+  id: '4588',
+  date: '2024-03-08T22:50:00',
+  status: 'refunded',
+  email: 'liam.walker@example.com',
+  amount: 701
+}, {
+  id: '4587',
+  date: '2024-03-08T20:15:00',
+  status: 'paid',
+  email: 'charlotte.hall@example.com',
+  amount: 856
+}, {
+  id: '4586',
+  date: '2024-03-08T17:40:00',
+  status: 'paid',
+  email: 'mason.young@example.com',
+  amount: 492
+}, {
+  id: '4585',
+  date: '2024-03-08T14:55:00',
+  status: 'failed',
+  email: 'amelia.king@example.com',
+  amount: 637
+}, {
+  id: '4584',
+  date: '2024-03-08T12:30:00',
+  status: 'paid',
+  email: 'elijah.wright@example.com',
+  amount: 784
+}, {
+  id: '4583',
+  date: '2024-03-08T09:45:00',
+  status: 'refunded',
+  email: 'harper.scott@example.com',
+  amount: 345
+}, {
+  id: '4582',
+  date: '2024-03-07T23:10:00',
+  status: 'paid',
+  email: 'evelyn.green@example.com',
+  amount: 918
+}, {
+  id: '4581',
+  date: '2024-03-07T20:25:00',
+  status: 'paid',
+  email: 'logan.baker@example.com',
+  amount: 567
+}])
+
+const columns: TableColumn<Payment>[] = [{
+  id: 'select',
+  header: ({ table }) => h(UCheckbox, {
+    'modelValue': table.getIsAllPageRowsSelected(),
+    'indeterminate': table.getIsSomePageRowsSelected(),
+    'onUpdate:modelValue': (value: boolean) => table.toggleAllPageRowsSelected(!!value),
+    'ariaLabel': 'Select all'
+  }),
+  cell: ({ row }) => h(UCheckbox, {
+    'modelValue': row.getIsSelected(),
+    'onUpdate:modelValue': (value: boolean) => row.toggleSelected(!!value),
+    'ariaLabel': 'Select row'
+  }),
+  enableSorting: false,
+  enableHiding: false
+}, {
+  accessorKey: 'id',
+  header: '#',
+  cell: ({ row }) => `#${row.getValue('id')}`
+}, {
+  accessorKey: 'date',
+  header: 'Date',
+  cell: ({ row }) => {
+    return new Date(row.getValue('date')).toLocaleString('en-US', {
+      day: 'numeric',
+      month: 'short',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    })
+  }
+}, {
+  accessorKey: 'status',
+  header: 'Status',
+  cell: ({ row }) => {
+    const color = ({
+      paid: 'success' as const,
+      failed: 'error' as const,
+      refunded: 'neutral' as const
+    })[row.getValue('status') as string]
+
+    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
+  }
+}, {
+  accessorKey: 'email',
+  header: ({ column }) => {
+    const isSorted = column.getIsSorted()
+
+    return h(UButton, {
+      color: 'neutral',
+      variant: 'ghost',
+      label: 'Email',
+      icon: isSorted ? (isSorted === 'asc' ? 'i-heroicons-bars-arrow-up-20-solid' : 'i-heroicons-bars-arrow-down-20-solid') : 'i-heroicons-arrows-up-down-20-solid',
+      class: '-mx-2.5',
+      onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
+    })
+  },
+  cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email'))
+}, {
+  accessorKey: 'amount',
+  header: () => h('div', { class: 'text-right' }, 'Amount'),
+  cell: ({ row }) => {
+    const amount = Number.parseFloat(row.getValue('amount'))
+
+    const formatted = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'EUR'
+    }).format(amount)
+
+    return h('div', { class: 'text-right font-medium' }, formatted)
+  }
+}, {
+  id: 'actions',
+  enableHiding: false,
+  cell: ({ row }) => {
+    const items = [{
+      type: 'label',
+      label: 'Actions'
+    }, {
+      label: 'Copy payment ID',
+      onSelect() {
+        navigator.clipboard.writeText(row.original.id)
+
+        toast.add({
+          title: 'Payment ID copied to clipboard!',
+          color: 'success',
+          icon: 'i-heroicons-check-circle'
+        })
+      }
+    }, {
+      label: row.getIsExpanded() ? 'Collapse' : 'Expand',
+      onSelect() {
+        row.toggleExpanded()
+      }
+    }, {
+      type: 'separator'
+    }, {
+      label: 'View customer'
+    }, {
+      label: 'View payment details'
+    }]
+
+    return h('div', { class: 'text-right' }, h(UDropdownMenu, {
+      content: {
+        align: 'end'
+      },
+      items
+    }, () => h(UButton, {
+      icon: 'i-heroicons-ellipsis-vertical-20-solid',
+      color: 'neutral',
+      variant: 'ghost',
+      class: 'ml-auto'
+    })))
+  }
+}]
+
+const table = useTemplateRef('table')
+
+function randomize() {
+  data.value = [...data.value].sort(() => Math.random() - 0.5)
+}
+</script>
+
+<template>
+  <div class="flex-1 divide-y divide-[var(--ui-border-accented)]">
+    <div class="flex items-center gap-2 px-4 py-3.5">
+      <UInput
+        :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
+        class="max-w-sm"
+        placeholder="Filter emails..."
+        @update:model-value="table?.tableApi?.getColumn('email')?.setFilterValue($event)"
+      />
+
+      <UButton color="neutral" label="Randomize" @click="randomize" />
+
+      <UDropdownMenu
+        :items="table?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
+          label: upperFirst(column.id),
+          type: 'checkbox' as const,
+          checked: column.getIsVisible(),
+          onUpdateChecked(checked: boolean) {
+            table?.tableApi?.getColumn(column.id)?.toggleVisibility(!!checked)
+          },
+          onSelect(e?: Event) {
+            e?.preventDefault()
+          }
+        }))"
+        :content="{ align: 'end' }"
+      >
+        <UButton
+          label="Columns"
+          color="neutral"
+          variant="outline"
+          trailing-icon="i-heroicons-chevron-down-20-solid"
+          class="ml-auto"
+        />
+      </UDropdownMenu>
+    </div>
+
+    <UTable
+      ref="table"
+      :data="data"
+      :columns="columns"
+      sticky
+      class="h-96"
+    >
+      <template #expanded="{ row }">
+        <pre>{{ row.original }}</pre>
+      </template>
+    </UTable>
+
+    <div class="px-4 py-3.5 text-sm text-[var(--ui-text-muted)]">
+      {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
+      {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/content/examples/table/TableFetchExample.vue b/docs/app/components/content/examples/table/TableFetchExample.vue
index 7d76763457..7b7f1dfc6f 100644
--- a/docs/app/components/content/examples/table/TableFetchExample.vue
+++ b/docs/app/components/content/examples/table/TableFetchExample.vue
@@ -12,7 +12,7 @@ type User = {
   company: { name: string }
 }
 
-const { data: users, status } = await useFetch<User[]>('https://jsonplaceholder.typicode.com/users', {
+const { data, status } = await useFetch<User[]>('https://jsonplaceholder.typicode.com/users', {
   transform: (data) => {
     return data?.map(user => ({
       ...user,
@@ -51,5 +51,5 @@ const columns: TableColumn<User>[] = [{
 </script>
 
 <template>
-  <UTable :data="users" :columns="columns" :loading="status === 'pending'" class="flex-1" />
+  <UTable :data="data" :columns="columns" :loading="status === 'pending'" class="flex-1" />
 </template>
diff --git a/docs/app/components/content/examples/table/TableGlobalFilterExample.vue b/docs/app/components/content/examples/table/TableGlobalFilterExample.vue
new file mode 100644
index 0000000000..abfc1ea1e9
--- /dev/null
+++ b/docs/app/components/content/examples/table/TableGlobalFilterExample.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { h, resolveComponent } from 'vue'
+import type { TableColumn } from '@nuxt/ui'
+
+const UBadge = resolveComponent('UBadge')
+
+type Payment = {
+  id: string
+  date: string
+  status: 'paid' | 'failed' | 'refunded'
+  email: string
+  amount: number
+}
+
+const data = ref<Payment[]>([{
+  id: '4600',
+  date: '2024-03-11T15:30:00',
+  status: 'paid',
+  email: 'james.anderson@example.com',
+  amount: 594
+}, {
+  id: '4599',
+  date: '2024-03-11T10:10:00',
+  status: 'failed',
+  email: 'mia.white@example.com',
+  amount: 276
+}, {
+  id: '4598',
+  date: '2024-03-11T08:50:00',
+  status: 'refunded',
+  email: 'william.brown@example.com',
+  amount: 315
+}, {
+  id: '4597',
+  date: '2024-03-10T19:45:00',
+  status: 'paid',
+  email: 'emma.davis@example.com',
+  amount: 529
+}, {
+  id: '4596',
+  date: '2024-03-10T15:55:00',
+  status: 'paid',
+  email: 'ethan.harris@example.com',
+  amount: 639
+}])
+
+const columns: TableColumn<Payment>[] = [{
+  accessorKey: 'id',
+  header: '#',
+  cell: ({ row }) => `#${row.getValue('id')}`
+}, {
+  accessorKey: 'date',
+  header: 'Date',
+  cell: ({ row }) => {
+    return new Date(row.getValue('date')).toLocaleString('en-US', {
+      day: 'numeric',
+      month: 'short',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    })
+  }
+}, {
+  accessorKey: 'status',
+  header: 'Status',
+  cell: ({ row }) => {
+    const color = ({
+      paid: 'success' as const,
+      failed: 'error' as const,
+      refunded: 'neutral' as const
+    })[row.getValue('status') as string]
+
+    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
+  }
+}, {
+  accessorKey: 'email',
+  header: 'Email'
+}, {
+  accessorKey: 'amount',
+  header: () => h('div', { class: 'text-right' }, 'Amount'),
+  cell: ({ row }) => {
+    const amount = Number.parseFloat(row.getValue('amount'))
+
+    const formatted = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'EUR'
+    }).format(amount)
+
+    return h('div', { class: 'text-right font-medium' }, formatted)
+  }
+}]
+
+const table = useTemplateRef('table')
+
+const globalFilter = ref('45')
+</script>
+
+<template>
+  <div class="flex flex-col flex-1">
+    <div class="flex px-4 py-3.5 border-b border-[var(--ui-border-accented)]">
+      <UInput
+        v-model="globalFilter"
+        class="max-w-sm"
+        placeholder="Filter..."
+      />
+    </div>
+
+    <UTable
+      ref="table"
+      v-model:global-filter="globalFilter"
+      :data="data"
+      :columns="columns"
+    />
+  </div>
+</template>
diff --git a/docs/app/components/content/examples/table/TableRowActionsExample.vue b/docs/app/components/content/examples/table/TableRowActionsExample.vue
index 1ab921a60a..6e42831a0b 100644
--- a/docs/app/components/content/examples/table/TableRowActionsExample.vue
+++ b/docs/app/components/content/examples/table/TableRowActionsExample.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { h, resolveComponent } from 'vue'
-import type { TableColumn, TableRow } from '@nuxt/ui'
+import type { TableColumn } from '@nuxt/ui'
+import type { Row } from '@tanstack/vue-table'
 
 const UButton = resolveComponent('UButton')
 const UBadge = resolveComponent('UBadge')
@@ -109,7 +110,7 @@ const columns: TableColumn<Payment>[] = [{
   }
 }]
 
-function getRowItems(row: TableRow<Payment>) {
+function getRowItems(row: Row<Payment>) {
   return [{
     type: 'label',
     label: 'Actions'
diff --git a/docs/app/components/content/examples/table/TableRowExpandableExample.vue b/docs/app/components/content/examples/table/TableRowExpandableExample.vue
index 005b3707f3..5111d7eed6 100644
--- a/docs/app/components/content/examples/table/TableRowExpandableExample.vue
+++ b/docs/app/components/content/examples/table/TableRowExpandableExample.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { h, resolveComponent } from 'vue'
-import type { TableColumn, TableRow } from '@nuxt/ui'
+import type { TableColumn } from '@nuxt/ui'
 
 const UButton = resolveComponent('UButton')
 const UBadge = resolveComponent('UBadge')
-const UDropdownMenu = resolveComponent('UDropdownMenu')
 
 type Payment = {
   id: string
@@ -47,6 +46,18 @@ const data = ref<Payment[]>([{
 }])
 
 const columns: TableColumn<Payment>[] = [{
+  id: 'expand',
+  cell: ({ row }) => h(UButton, {
+    color: 'neutral',
+    variant: 'ghost',
+    icon: 'i-heroicons-chevron-down-20-solid',
+    square: true,
+    ui: {
+      leadingIcon: ['transition-transform', row.getIsExpanded() ? 'duration-200 rotate-180' : '']
+    },
+    onClick: () => row.toggleExpanded()
+  })
+}, {
   accessorKey: 'id',
   header: '#',
   cell: ({ row }) => `#${row.getValue('id')}`
@@ -90,35 +101,19 @@ const columns: TableColumn<Payment>[] = [{
 
     return h('div', { class: 'text-right font-medium' }, formatted)
   }
-}, {
-  id: 'actions',
-  cell: ({ row }) => {
-    return h('div', { class: 'text-right' }, h(UDropdownMenu, {
-      content: {
-        align: 'end'
-      },
-      items: getRowItems(row)
-    }, () => h(UButton, {
-      icon: 'i-heroicons-ellipsis-vertical-20-solid',
-      color: 'neutral',
-      variant: 'ghost',
-      class: 'ml-auto'
-    })))
-  }
 }]
 
-function getRowItems(row: TableRow<Payment>) {
-  return [{
-    label: row.getIsExpanded() ? 'Collapse' : 'Expand',
-    onSelect() {
-      row.toggleExpanded()
-    }
-  }]
-}
+const expanded = ref({ 1: true })
 </script>
 
 <template>
-  <UTable :data="data" :columns="columns" class="flex-1">
+  <UTable
+    v-model:expanded="expanded"
+    :data="data"
+    :columns="columns"
+    :ui="{ tr: 'data-[expanded=true]:bg-[var(--ui-bg-elevated)]/50' }"
+    class="flex-1"
+  >
     <template #expanded="{ row }">
       <pre>{{ row.original }}</pre>
     </template>
diff --git a/docs/app/components/content/examples/table/TableRowSelectionExample.vue b/docs/app/components/content/examples/table/TableRowSelectionExample.vue
index 0f9f41e9f3..f02058af94 100644
--- a/docs/app/components/content/examples/table/TableRowSelectionExample.vue
+++ b/docs/app/components/content/examples/table/TableRowSelectionExample.vue
@@ -99,8 +99,24 @@ const columns: TableColumn<Payment>[] = [{
     return h('div', { class: 'text-right font-medium' }, formatted)
   }
 }]
+
+const table = useTemplateRef('table')
+
+const rowSelection = ref({ 1: true })
 </script>
 
 <template>
-  <UTable :data="data" :columns="columns" class="flex-1" />
+  <div class="flex-1">
+    <UTable
+      ref="table"
+      v-model:row-selection="rowSelection"
+      :data="data"
+      :columns="columns"
+    />
+
+    <div class="px-4 py-3.5 border-t border-[var(--ui-border-accented)] text-sm text-[var(--ui-text-muted)]">
+      {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
+      {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
+    </div>
+  </div>
 </template>
diff --git a/docs/content/3.components/table.md b/docs/content/3.components/table.md
index cce2a3e726..ecb7cd30d1 100644
--- a/docs/content/3.components/table.md
+++ b/docs/content/3.components/table.md
@@ -14,6 +14,22 @@ links:
 
 The Table component is built on top of [TanStack Table](https://tanstack.com/table/latest) and is powered by the [useVueTable](https://tanstack.com/table/latest/docs/framework/vue/vue-table#usevuetable) composable to provide a flexible and fully type-safe API.
 
+::note
+Some features of **TanStack Table** are not supported yet, we'll add more over time.
+::
+
+::component-example
+---
+source: false
+name: 'table-example'
+class: '!p-0'
+---
+::
+
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/tree/v3/docs/app/components/content/examples/table/TableExample.vue"}
+This example demonstrates the most common use case of the `Table` component. Check out the source code on GitHub.
+::
+
 ### Data
 
 Use the `data` prop as an array of objects, the columns will be generated based on the keys of the objects.
@@ -188,9 +204,53 @@ props:
 
 ## Examples
 
+### With row actions
+
+You can add a new column that renders a [DropdownMenu](/components/dropdown-menu) component inside the `cell` to render row actions.
+
+::component-example
+---
+prettier: true
+collapse: true
+name: 'table-row-actions-example'
+highlights:
+  - 110
+  - 134
+class: '!p-0'
+---
+::
+
+### With expandable rows
+
+You can add a new column that renders a [Button](/components/button) component inside the `cell` to toggle the expandable state of a row using the TanStack Table [Expanding APIs](https://tanstack.com/table/latest/docs/api/features/expanding).
+
+::caution
+You need to define the `#expanded` slot to render the expanded content which will receive the row as a parameter.
+::
+
+::component-example
+---
+prettier: true
+collapse: true
+name: 'table-row-expandable-example'
+highlights:
+  - 55
+  - 71
+class: '!p-0'
+---
+::
+
+::tip
+You can use the `expanded` prop to control the expandable state of the rows (can be binded with `v-model`).
+::
+
+::note
+You could also add this action to the [DropdownMenu](/components/dropdown-menu) component inside the `actions` column.
+::
+
 ### With row selection
 
-You can add a new column that renders a [Checkbox](/components/checkbox) component inside the `header` and `cell` to select rows.
+You can add a new column that renders a [Checkbox](/components/checkbox) component inside the `header` and `cell` to select rows using the TanStack Table [Row Selection APIs](https://tanstack.com/table/latest/docs/api/features/row-selection).
 
 ::component-example
 ---
@@ -204,43 +264,81 @@ class: '!p-0'
 ---
 ::
 
-::note{to="https://tanstack.com/table/latest/docs/api/features/row-selection" target="_blank"}
-This example uses the Row Selection APIs from TanStack Table:
+::tip
+You can use the `row-selection` prop to control the selection state of the rows (can be binded with `v-model`).
+::
+
+### With column sorting
+
+You can update a column `header` to render a [Button](/components/button) component inside the `header` to toggle the sorting state using the TanStack Table [Sorting APIs](https://tanstack.com/table/latest/docs/api/features/sorting).
 
-- `table.getIsAllPageRowsSelected()`
-- `table.getIsSomePageRowsSelected()`
-- `table.toggleAllPageRowsSelected()`
-- `row.getIsSelected()`
-- `row.toggleSelected()`
+::component-example
+---
+prettier: true
+collapse: true
+name: 'table-column-sorting-example'
+highlights:
+  - 90
+  - 105
+class: '!p-0'
+---
 ::
 
-### With row actions
+::tip
+You can use the `sorting` prop to control the sorting state of the columns (can be binded with `v-model`).
+::
 
-You can add a new column that renders a [DropdownMenu](/components/dropdown-menu) component inside the `cell` to render row actions.
+You can also create a reusable component to make any column header sortable.
 
 ::component-example
 ---
 prettier: true
 collapse: true
-name: 'table-row-actions-example'
+name: 'table-column-sorting-reusable-example'
 highlights:
-  - 109
-  - 133
+  - 110
+  - 161
 class: '!p-0'
 ---
 ::
 
-### With expandable rows
+::note
+In this example, we use a function to define the column header but you can also create an actual component.
+::
 
-You can control the expandable state of a row using the `row.getIsExpanded()`{lang="ts-type"} and `row.toggleExpanded()`{lang="ts-type"} methods using the TanStack Table [Expanding APIs](https://tanstack.com/table/latest/docs/api/features/expanding).
+### With column pinning
 
-You need to define the `#expanded` slot to render the expanded content which will receive the row as a parameter.
+You can update a column `header` to render a [Button](/components/button) component inside the `header` to toggle the pinning state using the TanStack Table [Pinning APIs](https://tanstack.com/table/latest/docs/api/features/row-pinning).
+
+::note
+A pinned column will become sticky on the left or right side of the table.
+::
 
 ::component-example
 ---
 prettier: true
 collapse: true
-name: 'table-row-expandable-example'
+name: 'table-column-pinning-example'
+highlights:
+  - 100
+  - 113
+class: '!p-0 overflow-clip'
+---
+::
+
+::tip
+You can use the `column-pinning` prop to control the pinning state of the columns (can be binded with `v-model`).
+::
+
+### With column visibility
+
+You can add use [DropdownMenu](/components/dropdown-menu) component to toggle the visibility of the columns using the TanStack Table [Column Visibility APIs](https://tanstack.com/table/latest/docs/api/features/column-visibility).
+
+::component-example
+---
+prettier: true
+collapse: true
+name: 'table-column-visibility-example'
 highlights:
   - 135
   - 142
@@ -248,19 +346,46 @@ class: '!p-0'
 ---
 ::
 
-::note
-In this example, the `Expand/Collapse` action is added to the [DropdownMenu](/components/dropdown-menu) component inside the `actions` column.
+::tip
+You can use the `column-visibility` prop to control the visibility state of the columns (can be binded with `v-model`).
 ::
 
-### With column sorting
+### With column filters
 
-### With column visibility
+You can use an [Input](/components/input) component to filter per column the rows using the TanStack Table [Column Filtering APIs](https://tanstack.com/table/latest/docs/api/features/column-filtering).
 
-### With column pinning
+::component-example
+---
+prettier: true
+collapse: true
+name: 'table-column-filters-example'
+highlights:
+  - 135
+  - 142
+class: '!p-0'
+---
+::
 
-### With column filtering
+::tip
+You can use the `column-filters` prop to control the filters state of the columns (can be binded with `v-model`).
+::
+
+### With global filter
+
+You can use an [Input](/components/input) component to filter the rows using the TanStack Table [Global Filtering APIs](https://tanstack.com/table/latest/docs/api/features/global-filtering).
+
+::component-example
+---
+prettier: true
+collapse: true
+name: 'table-global-filter-example'
+class: '!p-0'
+---
+::
 
-### With global filtering
+::tip
+You can use the `global-filter` prop to control the global filter state (can be binded with `v-model`).
+::
 
 ### With fetched data
 
diff --git a/docs/package.json b/docs/package.json
index b6e7d9779c..bab6a5c338 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -9,7 +9,7 @@
     "@nuxt/content": "^2.13.4",
     "@nuxt/image": "^1.8.1",
     "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@041ca1f",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@5c9e5b4",
     "@nuxthub/core": "^0.7.33",
     "@nuxtjs/plausible": "^1.0.3",
     "@octokit/rest": "^21.0.2",
diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
index f4587503bb..20b59b1b09 100644
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -285,7 +285,7 @@ onMounted(() => {
         @update:model-value="table?.tableApi?.getColumn('email')?.setFilterValue($event)"
       />
 
-      <UButton color="neutral" variant="outline" label="Randomize" @click="randomize" />
+      <UButton color="neutral" label="Randomize" @click="randomize" />
 
       <UDropdownMenu
         :items="table?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e045c482bc..c405416b2b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -186,8 +186,8 @@ importers:
         specifier: workspace:*
         version: link:..
       '@nuxt/ui-pro':
-        specifier: https://pkg.pr.new/@nuxt/ui-pro@041ca1f
-        version: https://pkg.pr.new/@nuxt/ui-pro@041ca1f(magicast@0.3.5)(rollup@4.24.0)(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))
+        specifier: https://pkg.pr.new/@nuxt/ui-pro@5c9e5b4
+        version: https://pkg.pr.new/@nuxt/ui-pro@5c9e5b4(magicast@0.3.5)(rollup@4.24.0)(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))
       '@nuxthub/core':
         specifier: ^0.7.33
         version: 0.7.34(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.24.0)(vite@5.4.9(@types/node@22.7.7)(lightningcss@1.27.0)(terser@5.36.0))
@@ -1616,9 +1616,9 @@ packages:
       vitest:
         optional: true
 
-  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@041ca1f':
-    resolution: {tarball: https://pkg.pr.new/@nuxt/ui-pro@041ca1f}
-    version: 2.0.0-alpha.6
+  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@5c9e5b4':
+    resolution: {tarball: https://pkg.pr.new/@nuxt/ui-pro@5c9e5b4}
+    version: 3.0.0-alpha.6
     peerDependencies:
       typescript: ^5.6.3
 
@@ -8357,7 +8357,7 @@ snapshots:
       - supports-color
       - webpack-sources
 
-  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@041ca1f(magicast@0.3.5)(rollup@4.24.0)(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))':
+  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@5c9e5b4(magicast@0.3.5)(rollup@4.24.0)(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))':
     dependencies:
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.0)
       '@nuxt/schema': 3.13.2(rollup@4.24.0)
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index e8cca73020..efd239634a 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -31,7 +31,6 @@ const table = tv({ extend: tv(theme), ...(appConfig.ui?.table || {}) })
 type TableVariants = VariantProps<typeof table>
 
 export type TableColumn<T> = ColumnDef<T>
-export type TableRow<T> = Row<T>
 
 export interface TableData {
   [key: string]: any
@@ -202,7 +201,7 @@ defineExpose({
       <tbody :class="ui.tbody({ class: [props.ui?.tbody] })">
         <template v-if="tableApi.getRowModel().rows?.length">
           <template v-for="row in tableApi.getRowModel().rows" :key="row.id">
-            <tr :data-state="row.getIsSelected() ? 'selected' : undefined" :class="ui.tr({ class: [props.ui?.tr] })">
+            <tr :data-selected="row.getIsSelected()" :data-expanded="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })">
               <td
                 v-for="cell in row.getVisibleCells()"
                 :key="cell.id"
diff --git a/src/theme/table.ts b/src/theme/table.ts
index 990410b360..23a4884ff0 100644
--- a/src/theme/table.ts
+++ b/src/theme/table.ts
@@ -6,7 +6,7 @@ export default (options: Required<ModuleOptions>) => ({
     base: 'min-w-full overflow-clip',
     thead: 'relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]',
     tbody: 'divide-y divide-[var(--ui-border)]',
-    tr: 'data-[state=selected]:bg-[var(--ui-bg-elevated)]/50',
+    tr: 'data-[selected=true]:bg-[var(--ui-bg-elevated)]/50',
     th: 'px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0',
     td: 'p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0',
     empty: 'py-6 text-center text-sm text-[var(--ui-text-muted)]'

From c0b2241d15ac609bcb38a5204bc13c403441a39e Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 23 Oct 2024 17:28:08 +0200
Subject: [PATCH 26/26] up

---
 .../__snapshots__/Table.spec.ts.snap          | 208 +++++++++---------
 1 file changed, 104 insertions(+), 104 deletions(-)

diff --git a/test/components/__snapshots__/Table.spec.ts.snap b/test/components/__snapshots__/Table.spec.ts.snap
index 1e84164f61..53a20fe735 100644
--- a/test/components/__snapshots__/Table.spec.ts.snap
+++ b/test/components/__snapshots__/Table.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`Table > renders with class correctly 1`] = `
 "<div class="overflow-auto absolute">
   <table class="min-w-full overflow-clip">
     <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
@@ -12,35 +12,35 @@ exports[`Table > renders with class correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
@@ -56,7 +56,7 @@ exports[`Table > renders with columns correctly 1`] = `
 "<div class="relative overflow-auto">
   <table class="min-w-full overflow-clip">
     <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">
           <ucheckbox modelvalue="false" indeterminate="false" arialabel="Select all"></ucheckbox>
         </th>
@@ -75,7 +75,7 @@ exports[`Table > renders with columns correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
           <ucheckbox modelvalue="false" arialabel="Select row"></ucheckbox>
         </td>
@@ -97,7 +97,7 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
           <ucheckbox modelvalue="false" arialabel="Select row"></ucheckbox>
         </td>
@@ -119,7 +119,7 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
           <ucheckbox modelvalue="false" arialabel="Select row"></ucheckbox>
         </td>
@@ -141,7 +141,7 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
           <ucheckbox modelvalue="false" arialabel="Select row"></ucheckbox>
         </td>
@@ -163,7 +163,7 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">
           <ucheckbox modelvalue="false" arialabel="Select row"></ucheckbox>
         </td>
@@ -194,7 +194,7 @@ exports[`Table > renders with data correctly 1`] = `
 "<div class="relative overflow-auto">
   <table class="min-w-full overflow-clip">
     <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
@@ -202,35 +202,35 @@ exports[`Table > renders with data correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
@@ -246,7 +246,7 @@ exports[`Table > renders with loading animation carousel correctly 1`] = `
 "<div class="relative overflow-auto">
   <table class="min-w-full overflow-clip">
     <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-primary)] after:animate-[carousel_2s_ease-in-out_infinite]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
@@ -254,35 +254,35 @@ exports[`Table > renders with loading animation carousel correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
@@ -298,7 +298,7 @@ exports[`Table > renders with loading animation carousel-inverse correctly 1`] =
 "<div class="relative overflow-auto">
   <table class="min-w-full overflow-clip">
     <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-primary)] after:animate-[carousel-inverse_2s_ease-in-out_infinite]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
@@ -306,35 +306,35 @@ exports[`Table > renders with loading animation carousel-inverse correctly 1`] =
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
@@ -350,7 +350,7 @@ exports[`Table > renders with loading animation elastic correctly 1`] = `
 "<div class="relative overflow-auto">
   <table class="min-w-full overflow-clip">
     <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-primary)] after:animate-[elastic_2s_ease-in-out_infinite]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
@@ -358,35 +358,35 @@ exports[`Table > renders with loading animation elastic correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
@@ -402,7 +402,7 @@ exports[`Table > renders with loading animation swing correctly 1`] = `
 "<div class="relative overflow-auto">
   <table class="min-w-full overflow-clip">
     <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-primary)] after:animate-[swing_2s_ease-in-out_infinite]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
@@ -410,35 +410,35 @@ exports[`Table > renders with loading animation swing correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
@@ -454,7 +454,7 @@ exports[`Table > renders with loading color error correctly 1`] = `
 "<div class="relative overflow-auto">
   <table class="min-w-full overflow-clip">
     <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-error)] after:animate-[carousel_2s_ease-in-out_infinite]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
@@ -462,35 +462,35 @@ exports[`Table > renders with loading color error correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
@@ -506,7 +506,7 @@ exports[`Table > renders with loading color info correctly 1`] = `
 "<div class="relative overflow-auto">
   <table class="min-w-full overflow-clip">
     <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-info)] after:animate-[carousel_2s_ease-in-out_infinite]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
@@ -514,35 +514,35 @@ exports[`Table > renders with loading color info correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
@@ -558,7 +558,7 @@ exports[`Table > renders with loading color neutral correctly 1`] = `
 "<div class="relative overflow-auto">
   <table class="min-w-full overflow-clip">
     <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-bg-inverted)] after:animate-[carousel_2s_ease-in-out_infinite]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
@@ -566,35 +566,35 @@ exports[`Table > renders with loading color neutral correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
@@ -610,7 +610,7 @@ exports[`Table > renders with loading color primary correctly 1`] = `
 "<div class="relative overflow-auto">
   <table class="min-w-full overflow-clip">
     <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-primary)] after:animate-[carousel_2s_ease-in-out_infinite]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
@@ -618,35 +618,35 @@ exports[`Table > renders with loading color primary correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
@@ -662,7 +662,7 @@ exports[`Table > renders with loading color secondary correctly 1`] = `
 "<div class="relative overflow-auto">
   <table class="min-w-full overflow-clip">
     <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-secondary)] after:animate-[carousel_2s_ease-in-out_infinite]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
@@ -670,35 +670,35 @@ exports[`Table > renders with loading color secondary correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
@@ -714,7 +714,7 @@ exports[`Table > renders with loading color success correctly 1`] = `
 "<div class="relative overflow-auto">
   <table class="min-w-full overflow-clip">
     <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-success)] after:animate-[carousel_2s_ease-in-out_infinite]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
@@ -722,35 +722,35 @@ exports[`Table > renders with loading color success correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
@@ -766,7 +766,7 @@ exports[`Table > renders with loading color warning correctly 1`] = `
 "<div class="relative overflow-auto">
   <table class="min-w-full overflow-clip">
     <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-warning)] after:animate-[carousel_2s_ease-in-out_infinite]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
@@ -774,35 +774,35 @@ exports[`Table > renders with loading color warning correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
@@ -818,7 +818,7 @@ exports[`Table > renders with loading correctly 1`] = `
 "<div class="relative overflow-auto">
   <table class="min-w-full overflow-clip">
     <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-primary)] after:animate-[carousel_2s_ease-in-out_infinite]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
@@ -826,35 +826,35 @@ exports[`Table > renders with loading correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
@@ -870,7 +870,7 @@ exports[`Table > renders with sticky correctly 1`] = `
 "<div class="relative overflow-auto">
   <table class="min-w-full overflow-clip">
     <thead class="[&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] sticky top-0 inset-x-0 bg-[var(--ui-bg)]/75 z-[1] backdrop-blur">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
@@ -878,35 +878,35 @@ exports[`Table > renders with sticky correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
@@ -922,7 +922,7 @@ exports[`Table > renders with ui correctly 1`] = `
 "<div class="relative overflow-auto">
   <table class="min-w-full overflow-clip table-auto">
     <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Id</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Amount</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0">Status</th>
@@ -930,35 +930,35 @@ exports[`Table > renders with ui correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0">failed</td>
@@ -974,10 +974,10 @@ exports[`Table > renders without results correctly 1`] = `
 "<div class="relative overflow-auto">
   <table class="min-w-full overflow-clip">
     <thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50"></tr>
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50"></tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="data-[state=selected]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
         <td colspan="0" class="py-6 text-center text-sm text-[var(--ui-text-muted)]"> No results </td>
       </tr>
     </tbody>