Error: Snapshot `Table > renders with data correctly 1` mismatched - Expected + Received @@ -1,46 +1,46 @@ "<div class="relative overflow-auto"> <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 data-[can-select=true]:hover: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 data-[can-select=true]:cursor-pointer"> <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> <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">Email</th> </tr> </thead> <tbody class="divide-y divide-[var(--ui-border)]"> - <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"> + <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 data-[can-select=true]:cursor-pointer"> <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">[email protected]</td> </tr> <!--v-if--> - <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"> + <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 data-[can-select=true]:cursor-pointer"> <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">[email protected]</td> </tr> <!--v-if--> - <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"> + <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 data-[can-select=true]:cursor-pointer"> <td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has

Error: Snapshot `Table > renders without data correctly 1` mismatched - Expected + Received "<div class="relative overflow-auto"> <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 data-[can-select=true]:hover: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 data-[can-select=true]:cursor-pointer"></tr> </thead> <tbody class="divide-y divide-[var(--ui-border)]"> - <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover: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 data-[can-select=true]:cursor-pointer"> <td colspan="0" class="py-6 text-center text-sm text-[var(--ui-text-muted)]">No data</td> </tr> </tbody> </table> </div>" ❯ ../components/Table.spec.ts:165:18

Error: Snapshot `Table > renders with caption correctly 1` mismatched - Expected + Received @@ -1,46 +1,46 @@ "<div class="relative overflow-auto"> <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 data-[can-select=true]:hover: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 data-[can-select=true]:cursor-pointer"> <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> <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">Email</th> </tr> </thead> <tbody class="divide-y divide-[var(--ui-border)]"> - <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"> + <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 data-[can-select=true]:cursor-pointer"> <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">[email protected]</td> </tr> <!--v-if--> - <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"> + <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 data-[can-select=true]:cursor-pointer"> <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">[email protected]</td> </tr> <!--v-if--> - <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"> + <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 data-[can-select=true]:cursor-pointer"> <td data-pinned="false" class="p-4 text-sm text-[var(--

Error: Snapshot `Table > renders with columns correctly 1` mismatched - Expected + Received @@ -1,10 +1,10 @@ "<div class="relative overflow-auto"> <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 data-[can-select=true]:hover: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 data-[can-select=true]:cursor-pointer"> <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-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"> <!----> <!----> @@ -25,11 +25,11 @@ <!----> </th> </tr> </thead> <tbody class="divide-y divide-[var(--ui-border)]"> - <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"> + <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 data-[can-select=true]:cursor-pointer"> <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-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"> <!----> <!----> @@ -56,11 +56,11 @@ <!--teleport end--> </div> </td> </tr> <!--v-if--> - <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"> + <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 data-[can-select=true]:cursor-pointer"> <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-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"> <!----> <!----> @@ -87,11 +87,11 @@ <!--teleport end--> </div> </td> </tr> <!--v-if--> - <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected

Error: Snapshot `Table > renders with sticky correctly 1` mismatched - Expected + Received @@ -1,46 +1,46 @@ "<div class="relative overflow-auto"> <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 data-[can-select=true]:hover: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 data-[can-select=true]:cursor-pointer"> <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> <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">Email</th> </tr> </thead> <tbody class="divide-y divide-[var(--ui-border)]"> - <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"> + <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 data-[can-select=true]:cursor-pointer"> <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">[email protected]</td> </tr> <!--v-if--> - <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"> + <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 data-[can-select=true]:cursor-pointer"> <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">[email protected]</td> </tr> <!--v-if--> - <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"> + <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 data-[can-select=true]:cursor-pointer"> <td data-pinned="false" class="p-4 tex

Error: Snapshot `Table > renders with loading correctly 1` mismatched - Expected + Received @@ -1,46 +1,46 @@ "<div class="relative overflow-auto"> <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 data-[can-select=true]:hover: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 data-[can-select=true]:cursor-pointer"> <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> <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">Email</th> </tr> </thead> <tbody class="divide-y divide-[var(--ui-border)]"> - <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"> + <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 data-[can-select=true]:cursor-pointer"> <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">[email protected]</td> </tr> <!--v-if--> - <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"> + <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 data-[can-select=true]:cursor-pointer"> <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">[email protected]</td> </tr> <!--v-if--> - <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"> + <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can

Error: Snapshot `Table > renders with loading color primary correctly 1` mismatched - Expected + Received @@ -1,46 +1,46 @@ "<div class="relative overflow-auto"> <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 data-[can-select=true]:hover: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 data-[can-select=true]:cursor-pointer"> <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> <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">Email</th> </tr> </thead> <tbody class="divide-y divide-[var(--ui-border)]"> - <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"> + <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 data-[can-select=true]:cursor-pointer"> <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">[email protected]</td> </tr> <!--v-if--> - <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"> + <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 data-[can-select=true]:cursor-pointer"> <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">[email protected]</td> </tr> <!--v-if--> - <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"> + <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)

Error: Snapshot `Table > renders with loading color secondary correctly 1` mismatched - Expected + Received @@ -1,46 +1,46 @@ "<div class="relative overflow-auto"> <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 data-[can-select=true]:hover: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 data-[can-select=true]:cursor-pointer"> <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> <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">Email</th> </tr> </thead> <tbody class="divide-y divide-[var(--ui-border)]"> - <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"> + <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 data-[can-select=true]:cursor-pointer"> <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">[email protected]</td> </tr> <!--v-if--> - <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"> + <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 data-[can-select=true]:cursor-pointer"> <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">[email protected]</td> </tr> <!--v-if--> - <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"> + <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-eleva

Error: Snapshot `Table > renders with loading color success correctly 1` mismatched - Expected + Received @@ -1,46 +1,46 @@ "<div class="relative overflow-auto"> <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 data-[can-select=true]:hover: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 data-[can-select=true]:cursor-pointer"> <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> <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">Email</th> </tr> </thead> <tbody class="divide-y divide-[var(--ui-border)]"> - <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"> + <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 data-[can-select=true]:cursor-pointer"> <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">[email protected]</td> </tr> <!--v-if--> - <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"> + <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 data-[can-select=true]:cursor-pointer"> <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">[email protected]</td> </tr> <!--v-if--> - <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"> + <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)

Error: Snapshot `Table > renders with loading color info correctly 1` mismatched - Expected + Received @@ -1,46 +1,46 @@ "<div class="relative overflow-auto"> <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 data-[can-select=true]:hover: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 data-[can-select=true]:cursor-pointer"> <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> <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">Email</th> </tr> </thead> <tbody class="divide-y divide-[var(--ui-border)]"> - <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"> + <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 data-[can-select=true]:cursor-pointer"> <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">[email protected]</td> </tr> <!--v-if--> - <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"> + <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 data-[can-select=true]:cursor-pointer"> <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">[email protected]</td> </tr> <!--v-if--> - <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"> + <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 d