From 0163a079dd4ed2adce15921c7c394bbf31199e01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20L=C3=B3pez=20C?= <khrystyan881@hotmail.com>
Date: Mon, 2 Dec 2024 10:40:23 -0500
Subject: [PATCH 1/6] add props onSelect, function handleRowSelect  and onClick
 event

---
 src/runtime/components/Table.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 809dfc4119..c712b45e18 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -58,6 +58,7 @@ export interface TableProps<T> {
    * @defaultValue false
    */
   sticky?: boolean
+  onSelect?: (e: Event, row: T) => void
   /** Whether the table should be in loading state. */
   loading?: boolean
   loadingColor?: TableVariants['loadingColor']
@@ -197,6 +198,13 @@ function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
   ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
 }
 
+function handleRowSelect(e: Event, row: Row<T>) {
+  if (!props.onSelect)
+    return
+  e.preventDefault()
+  row.toggleSelected(!row.getIsSelected())
+  props.onSelect(e, row.original)
+}
 defineExpose({
   tableApi
 })
@@ -229,7 +237,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-selected="row.getIsSelected()" :data-expanded="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })">
+            <tr :data-selected="row.getIsSelected()" :data-can-select="!!props.onSelect" :data-expanded="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })" @click="handleRowSelect($event, row)">
               <td
                 v-for="cell in row.getVisibleCells()"
                 :key="cell.id"

From 7c90f88adfc8739f816b0db611f6b218abc1b539 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20L=C3=B3pez=20C?= <khrystyan881@hotmail.com>
Date: Mon, 2 Dec 2024 13:20:55 -0500
Subject: [PATCH 2/6] add example component with event on select

---
 .../table/TableRowSelectionEventExample.vue   | 141 ++++++++++++++++++
 1 file changed, 141 insertions(+)
 create mode 100644 docs/app/components/content/examples/table/TableRowSelectionEventExample.vue

diff --git a/docs/app/components/content/examples/table/TableRowSelectionEventExample.vue b/docs/app/components/content/examples/table/TableRowSelectionEventExample.vue
new file mode 100644
index 0000000000..41d5c4841a
--- /dev/null
+++ b/docs/app/components/content/examples/table/TableRowSelectionEventExample.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { h, resolveComponent } from 'vue'
+import type { TableColumn, TableRow } 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: '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 rowSelection = ref<Record<string, boolean>>({ })
+function onSelect(row: TableRow<Payment>, e?: Event) {
+  /* If you decide to also select the column you can do this  */
+  row.toggleSelected(!row.getIsSelected())
+  console.info(e)
+}
+const selectedRows = computed(() => {
+  if (!rowSelection.value) return []
+  const indexes = Object.entries(rowSelection.value).filter(rs => rs[1])?.map(rs => Number.parseInt(rs[0])) || []
+  if (indexes.length === 0) return []
+  return data.value.filter((_, index) => indexes.includes(index))
+})
+function quitSelect(row: TableRow<Payment>) {
+  const index = data.value.findIndex(r => r.id === row.original.id)
+  if (rowSelection.value[index]) {
+    rowSelection.value = { ...rowSelection.value, [index]: false }
+  }
+}
+</script>
+
+<template>
+  <div class=" flex w-full flex-1 gap-1">
+    <div class="flex-1">
+      <UTable
+        ref="table"
+        v-model:row-selection="rowSelection"
+        :data="data"
+        :columns="columns"
+        @select="onSelect"
+      />
+      <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>
+    <div v-if="selectedRows.length>0">
+      <UTable
+
+        :data="selectedRows"
+        :ui="{
+          td: 'truncate ... max-w-28'
+        }"
+        :columns="[
+          { accessorKey: 'email', header: 'Remove' }
+        ]"
+        class="border border-[var(--ui-border-accented)] rounded-[var(--ui-radius)] "
+        @select="quitSelect"
+      />
+    </div>
+  </div>
+</template>

From 1b616274b61e943fd6f356dbd2ca57922e1f91c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20L=C3=B3pez=20C?= <khrystyan881@hotmail.com>
Date: Mon, 2 Dec 2024 13:21:49 -0500
Subject: [PATCH 3/6] use example and add document how use @select event

---
 docs/content/3.components/table.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/docs/content/3.components/table.md b/docs/content/3.components/table.md
index 98f972b510..aac9dd5fc1 100644
--- a/docs/content/3.components/table.md
+++ b/docs/content/3.components/table.md
@@ -267,6 +267,24 @@ class: '!p-0'
 ::tip
 You can use the `row-selection` prop to control the selection state of the rows (can be binded with `v-model`).
 ::
+### With @select event
+
+You can also add a select listener on your Table to make the rows clickable. The function will receive the TableRow as the first argument and second  argument optional the event.
+
+You can use this to navigate to a page, open a modal or even to select the row manually.
+
+
+::component-example
+---
+prettier: true
+collapse: true
+name: 'table-row-selection-event-example'
+highlights:
+  - 55
+  - 70
+class: '!p-0'
+---
+::
 
 ### With column sorting
 

From 5ddccbcc181b673276e6fe36dce30d175e0362df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20L=C3=B3pez=20C?= <khrystyan881@hotmail.com>
Date: Mon, 2 Dec 2024 13:26:34 -0500
Subject: [PATCH 4/6] export type TableRow, create new props onSelect ,
 function handleRowSelect and data attribute can-select

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

diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index c712b45e18..d0298f224f 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -44,6 +44,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
@@ -58,7 +59,7 @@ export interface TableProps<T> {
    * @defaultValue false
    */
   sticky?: boolean
-  onSelect?: (e: Event, row: T) => void
+  onSelect?: (row: TableRow<T>, e?: Event) => void
   /** Whether the table should be in loading state. */
   loading?: boolean
   loadingColor?: TableVariants['loadingColor']
@@ -198,12 +199,12 @@ function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
   ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
 }
 
-function handleRowSelect(e: Event, row: Row<T>) {
+function handleRowSelect(row: TableRow<T>, e: Event) {
   if (!props.onSelect)
     return
   e.preventDefault()
-  row.toggleSelected(!row.getIsSelected())
-  props.onSelect(e, row.original)
+  e.stopPropagation()
+  props.onSelect(row, e)
 }
 defineExpose({
   tableApi
@@ -237,7 +238,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-selected="row.getIsSelected()" :data-can-select="!!props.onSelect" :data-expanded="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })" @click="handleRowSelect($event, row)">
+            <tr :data-selected="row.getIsSelected()" :data-can-select="!!props.onSelect" :data-expanded="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })" @click="handleRowSelect(row, $event)">
               <td
                 v-for="cell in row.getVisibleCells()"
                 :key="cell.id"

From 2c052ebabb4e0b347da60c3df2b11029f8d637d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20L=C3=B3pez=20C?= <khrystyan881@hotmail.com>
Date: Mon, 2 Dec 2024 13:27:01 -0500
Subject: [PATCH 5/6] add can-select hover

---
 src/theme/table.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/table.ts b/src/theme/table.ts
index dea2ad4173..3d5a735bdc 100644
--- a/src/theme/table.ts
+++ b/src/theme/table.ts
@@ -7,7 +7,7 @@ export default (options: Required<ModuleOptions>) => ({
     caption: 'sr-only',
     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-[selected=true]:bg-[var(--ui-bg-elevated)]/50',
+    tr: 'data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0',
     td: 'p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0',
     empty: 'py-6 text-center text-sm text-[var(--ui-text-muted)]'

From f6d05b092ee33107edb4a7926dea449310a72b2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20L=C3=B3pez=20C?= <khrystyan881@hotmail.com>
Date: Mon, 2 Dec 2024 13:43:08 -0500
Subject: [PATCH 6/6] update table snap

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

diff --git a/test/components/__snapshots__/Table.spec.ts.snap b/test/components/__snapshots__/Table.spec.ts.snap
index 0a4d2d0edf..4eb7843744 100644
--- a/test/components/__snapshots__/Table.spec.ts.snap
+++ b/test/components/__snapshots__/Table.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`Table > renders with caption correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <caption class="sr-only">Table caption</caption>
     <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-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-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])]:pe-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])]:pe-0">Status</th>
@@ -13,35 +13,35 @@ exports[`Table > renders with caption correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -58,7 +58,7 @@ exports[`Table > renders with caption slot correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-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])]:pe-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])]:pe-0">Status</th>
@@ -66,35 +66,35 @@ exports[`Table > renders with caption slot correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -111,7 +111,7 @@ exports[`Table > renders with cell slot correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-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])]:pe-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])]:pe-0">Status</th>
@@ -119,35 +119,35 @@ exports[`Table > renders with cell slot correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">ID Cell slot</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">ID Cell slot</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">ID Cell slot</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">ID Cell slot</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">ID Cell slot</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -164,7 +164,7 @@ exports[`Table > renders with class correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-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])]:pe-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])]:pe-0">Status</th>
@@ -172,35 +172,35 @@ exports[`Table > renders with class correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -217,7 +217,7 @@ exports[`Table > renders with columns correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">
           <div class="relative flex items-start" arialabel="Select all">
             <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
@@ -243,7 +243,7 @@ exports[`Table > renders with columns correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">
           <div class="relative flex items-start" arialabel="Select row">
             <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0-0-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
@@ -275,7 +275,7 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">
           <div class="relative flex items-start" arialabel="Select row">
             <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0-0-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
@@ -307,7 +307,7 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">
           <div class="relative flex items-start" arialabel="Select row">
             <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
@@ -339,7 +339,7 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">
           <div class="relative flex items-start" arialabel="Select row">
             <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
@@ -371,7 +371,7 @@ exports[`Table > renders with columns correctly 1`] = `
         </td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">
           <div class="relative flex items-start" arialabel="Select row">
             <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
@@ -413,7 +413,7 @@ exports[`Table > renders with data correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-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])]:pe-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])]:pe-0">Status</th>
@@ -421,35 +421,35 @@ exports[`Table > renders with data correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -466,7 +466,7 @@ exports[`Table > renders with empty slot correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-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])]:pe-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])]:pe-0">Status</th>
@@ -474,35 +474,35 @@ exports[`Table > renders with empty slot correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -519,7 +519,7 @@ exports[`Table > renders with expanded slot correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-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])]:pe-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])]:pe-0">Status</th>
@@ -527,35 +527,35 @@ exports[`Table > renders with expanded slot correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -572,7 +572,7 @@ exports[`Table > renders with header slot correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">ID Header slot</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])]:pe-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])]:pe-0">Status</th>
@@ -580,35 +580,35 @@ exports[`Table > renders with header slot correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -625,7 +625,7 @@ exports[`Table > renders with loading animation carousel correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-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])]:pe-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])]:pe-0">Status</th>
@@ -633,35 +633,35 @@ exports[`Table > renders with loading animation carousel correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -678,7 +678,7 @@ exports[`Table > renders with loading animation carousel-inverse correctly 1`] =
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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] rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-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])]:pe-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])]:pe-0">Status</th>
@@ -686,35 +686,35 @@ exports[`Table > renders with loading animation carousel-inverse correctly 1`] =
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -731,7 +731,7 @@ exports[`Table > renders with loading animation elastic correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-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])]:pe-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])]:pe-0">Status</th>
@@ -739,35 +739,35 @@ exports[`Table > renders with loading animation elastic correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -784,7 +784,7 @@ exports[`Table > renders with loading animation swing correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-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])]:pe-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])]:pe-0">Status</th>
@@ -792,35 +792,35 @@ exports[`Table > renders with loading animation swing correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -837,7 +837,7 @@ exports[`Table > renders with loading color error correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-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])]:pe-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])]:pe-0">Status</th>
@@ -845,35 +845,35 @@ exports[`Table > renders with loading color error correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -890,7 +890,7 @@ exports[`Table > renders with loading color info correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-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])]:pe-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])]:pe-0">Status</th>
@@ -898,35 +898,35 @@ exports[`Table > renders with loading color info correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -943,7 +943,7 @@ exports[`Table > renders with loading color neutral correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-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])]:pe-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])]:pe-0">Status</th>
@@ -951,35 +951,35 @@ exports[`Table > renders with loading color neutral correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -996,7 +996,7 @@ exports[`Table > renders with loading color primary correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-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])]:pe-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])]:pe-0">Status</th>
@@ -1004,35 +1004,35 @@ exports[`Table > renders with loading color primary correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -1049,7 +1049,7 @@ exports[`Table > renders with loading color secondary correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-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])]:pe-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])]:pe-0">Status</th>
@@ -1057,35 +1057,35 @@ exports[`Table > renders with loading color secondary correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -1102,7 +1102,7 @@ exports[`Table > renders with loading color success correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-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])]:pe-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])]:pe-0">Status</th>
@@ -1110,35 +1110,35 @@ exports[`Table > renders with loading color success correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -1155,7 +1155,7 @@ exports[`Table > renders with loading color warning correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-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])]:pe-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])]:pe-0">Status</th>
@@ -1163,35 +1163,35 @@ exports[`Table > renders with loading color warning correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -1208,7 +1208,7 @@ exports[`Table > renders with loading correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
-      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-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])]:pe-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])]:pe-0">Status</th>
@@ -1216,35 +1216,35 @@ exports[`Table > renders with loading correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -1261,7 +1261,7 @@ exports[`Table > renders with sticky correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-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])]:pe-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])]:pe-0">Status</th>
@@ -1269,35 +1269,35 @@ exports[`Table > renders with sticky correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -1314,7 +1314,7 @@ exports[`Table > renders with ui correctly 1`] = `
   <table class="min-w-full overflow-clip table-auto">
     <!--v-if-->
     <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-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-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])]:pe-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])]:pe-0">Status</th>
@@ -1322,35 +1322,35 @@ exports[`Table > renders with ui correctly 1`] = `
       </tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
       </tr>
       <!--v-if-->
-      <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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])]:pe-0">bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
         <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
@@ -1367,10 +1367,10 @@ exports[`Table > renders without data correctly 1`] = `
   <table class="min-w-full overflow-clip">
     <!--v-if-->
     <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-[selected=true]:bg-[var(--ui-bg-elevated)]/50"></tr>
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50"></tr>
     </thead>
     <tbody class="divide-y divide-[var(--ui-border)]">
-      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+      <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
         <td colspan="0" class="py-6 text-center text-sm text-[var(--ui-text-muted)]">No data</td>
       </tr>
     </tbody>