diff --git a/src/theme/pricing-table.ts b/src/theme/pricing-table.ts
index be719b1492..46ca5c3755 100644
--- a/src/theme/pricing-table.ts
+++ b/src/theme/pricing-table.ts
@@ -8,9 +8,9 @@ export default {
     thead: '',
     tbody: '',
     tr: '',
-    th: 'py-4 font-normal text-left border-b border-default',
+    th: 'py-4 font-normal text-left rtl:text-right border-b border-default',
     td: 'px-6 py-4 text-center border-b border-default',
-    tier: 'p-6 text-left font-normal align-top h-full',
+    tier: 'p-6 text-left rtl:text-right font-normal align-top h-full',
     tierWrapper: 'flex flex-col md:h-full',
     tierTitleWrapper: 'flex items-center gap-3',
     tierTitle: 'text-lg font-semibold text-highlighted',
diff --git a/test/components/__snapshots__/PricingTable-vue.spec.ts.snap b/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
index ffe74ebfdf..f7931806d5 100644
--- a/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PricingTable-vue.spec.ts.snap
@@ -7,7 +7,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -25,7 +25,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -43,7 +43,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -65,7 +65,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -73,7 +73,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -87,7 +87,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -101,7 +101,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -115,7 +115,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -123,7 +123,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -137,7 +137,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -296,7 +296,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -314,7 +314,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -332,7 +332,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -354,7 +354,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -362,7 +362,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -376,7 +376,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -390,7 +390,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -404,7 +404,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -412,7 +412,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -426,7 +426,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -585,7 +585,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -603,7 +603,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -621,7 +621,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -643,7 +643,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -651,7 +651,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -665,7 +665,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -679,7 +679,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -693,7 +693,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -701,7 +701,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -715,7 +715,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -874,7 +874,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -892,7 +892,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -910,7 +910,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -932,7 +932,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -940,7 +940,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -954,7 +954,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -968,7 +968,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -982,7 +982,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -990,7 +990,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1004,7 +1004,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1163,20 +1163,20 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">Tier slot</div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">Tier slot</div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">Tier slot</div>
         </th>
       </tr>
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -1184,7 +1184,7 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1198,7 +1198,7 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1212,7 +1212,7 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1226,7 +1226,7 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -1234,7 +1234,7 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1248,7 +1248,7 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1362,7 +1362,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
@@ -1379,7 +1379,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
@@ -1396,7 +1396,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
@@ -1417,7 +1417,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -1425,7 +1425,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1439,7 +1439,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1453,7 +1453,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1467,7 +1467,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -1475,7 +1475,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1489,7 +1489,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1645,7 +1645,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -1663,7 +1663,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -1681,7 +1681,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -1703,7 +1703,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -1711,7 +1711,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1725,7 +1725,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1739,7 +1739,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1753,7 +1753,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -1761,7 +1761,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1775,7 +1775,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1934,7 +1934,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -1949,7 +1949,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6">Tier button slot</div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -1964,7 +1964,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6">Tier button slot</div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -1983,7 +1983,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -1991,7 +1991,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2005,7 +2005,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2019,7 +2019,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2033,7 +2033,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -2041,7 +2041,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2055,7 +2055,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2205,7 +2205,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -2223,7 +2223,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -2241,7 +2241,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -2263,7 +2263,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -2271,7 +2271,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2285,7 +2285,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2299,7 +2299,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2313,7 +2313,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -2321,7 +2321,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2335,7 +2335,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2494,7 +2494,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -2512,7 +2512,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -2530,7 +2530,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -2552,7 +2552,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -2560,7 +2560,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2574,7 +2574,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2588,7 +2588,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2602,7 +2602,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -2610,7 +2610,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2624,7 +2624,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2783,7 +2783,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -2801,7 +2801,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -2819,7 +2819,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -2841,7 +2841,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -2849,7 +2849,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2863,7 +2863,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2877,7 +2877,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2891,7 +2891,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -2899,7 +2899,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2913,7 +2913,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3072,7 +3072,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
@@ -3090,7 +3090,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -3108,7 +3108,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
@@ -3130,7 +3130,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -3138,7 +3138,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3152,7 +3152,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3166,7 +3166,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3180,7 +3180,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -3188,7 +3188,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3202,7 +3202,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3361,7 +3361,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -3379,7 +3379,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -3397,7 +3397,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -3419,7 +3419,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -3427,7 +3427,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3441,7 +3441,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3455,7 +3455,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3469,7 +3469,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -3477,7 +3477,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3491,7 +3491,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3650,7 +3650,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -3668,7 +3668,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -3686,7 +3686,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -3708,7 +3708,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -3716,7 +3716,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3730,7 +3730,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3744,7 +3744,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3758,7 +3758,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -3766,7 +3766,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3780,7 +3780,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
diff --git a/test/components/__snapshots__/PricingTable.spec.ts.snap b/test/components/__snapshots__/PricingTable.spec.ts.snap
index af9666c2dd..548258365f 100644
--- a/test/components/__snapshots__/PricingTable.spec.ts.snap
+++ b/test/components/__snapshots__/PricingTable.spec.ts.snap
@@ -7,7 +7,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -25,7 +25,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -43,7 +43,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -65,7 +65,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -73,7 +73,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -87,7 +87,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -101,7 +101,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -115,7 +115,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -123,7 +123,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -137,7 +137,7 @@ exports[`PricingTable > renders with as correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -296,7 +296,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -314,7 +314,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -332,7 +332,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -354,7 +354,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -362,7 +362,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -376,7 +376,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -390,7 +390,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -404,7 +404,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -412,7 +412,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -426,7 +426,7 @@ exports[`PricingTable > renders with caption correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -585,7 +585,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -603,7 +603,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -621,7 +621,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -643,7 +643,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -651,7 +651,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -665,7 +665,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -679,7 +679,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -693,7 +693,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -701,7 +701,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -715,7 +715,7 @@ exports[`PricingTable > renders with caption slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -874,7 +874,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -892,7 +892,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -910,7 +910,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -932,7 +932,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -940,7 +940,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -954,7 +954,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -968,7 +968,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -982,7 +982,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -990,7 +990,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1004,7 +1004,7 @@ exports[`PricingTable > renders with class correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1163,20 +1163,20 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">Tier slot</div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">Tier slot</div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">Tier slot</div>
         </th>
       </tr>
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -1184,7 +1184,7 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1198,7 +1198,7 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1212,7 +1212,7 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1226,7 +1226,7 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -1234,7 +1234,7 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1248,7 +1248,7 @@ exports[`PricingTable > renders with tier slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1362,7 +1362,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>Tier badge slot
@@ -1379,7 +1379,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div>Tier badge slot
@@ -1396,7 +1396,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>Tier badge slot
@@ -1417,7 +1417,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -1425,7 +1425,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1439,7 +1439,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1453,7 +1453,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1467,7 +1467,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -1475,7 +1475,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1489,7 +1489,7 @@ exports[`PricingTable > renders with tier-badge slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1645,7 +1645,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -1663,7 +1663,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -1681,7 +1681,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -1703,7 +1703,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -1711,7 +1711,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1725,7 +1725,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1739,7 +1739,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1753,7 +1753,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -1761,7 +1761,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1775,7 +1775,7 @@ exports[`PricingTable > renders with tier-billing slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -1934,7 +1934,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -1949,7 +1949,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6">Tier button slot</div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -1964,7 +1964,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
             <div data-slot="tierButton" class="mt-6 md:mt-auto md:pt-6">Tier button slot</div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -1983,7 +1983,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -1991,7 +1991,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2005,7 +2005,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2019,7 +2019,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2033,7 +2033,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -2041,7 +2041,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2055,7 +2055,7 @@ exports[`PricingTable > renders with tier-button slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2205,7 +2205,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -2223,7 +2223,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -2241,7 +2241,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -2263,7 +2263,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -2271,7 +2271,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2285,7 +2285,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2299,7 +2299,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2313,7 +2313,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -2321,7 +2321,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2335,7 +2335,7 @@ exports[`PricingTable > renders with tier-description slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2494,7 +2494,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -2512,7 +2512,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -2530,7 +2530,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -2552,7 +2552,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -2560,7 +2560,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2574,7 +2574,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2588,7 +2588,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2602,7 +2602,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -2610,7 +2610,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2624,7 +2624,7 @@ exports[`PricingTable > renders with tier-discount slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2783,7 +2783,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -2801,7 +2801,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -2819,7 +2819,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -2841,7 +2841,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -2849,7 +2849,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2863,7 +2863,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2877,7 +2877,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2891,7 +2891,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -2899,7 +2899,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -2913,7 +2913,7 @@ exports[`PricingTable > renders with tier-price slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3072,7 +3072,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
@@ -3090,7 +3090,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -3108,7 +3108,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Tier title slot</div>
@@ -3130,7 +3130,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -3138,7 +3138,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3152,7 +3152,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3166,7 +3166,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3180,7 +3180,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -3188,7 +3188,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3202,7 +3202,7 @@ exports[`PricingTable > renders with tier-title slot correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3361,7 +3361,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -3379,7 +3379,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -3397,7 +3397,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -3419,7 +3419,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -3427,7 +3427,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3441,7 +3441,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3455,7 +3455,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3469,7 +3469,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -3477,7 +3477,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3491,7 +3491,7 @@ exports[`PricingTable > renders with tiers and sections correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3650,7 +3650,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
     <thead data-slot="thead" class="">
       <tr data-slot="tr" class="">
         <td></td>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Free</div>
@@ -3668,7 +3668,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full bg-elevated/50 border-x border-t border-default rounded-t-lg">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Pro</div><span data-slot="tierBadge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 truncate"><!--v-if--><span data-slot="label" class="truncate">Most popular</span>
@@ -3686,7 +3686,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
               </button></div>
           </div>
         </th>
-        <th scope="col" data-slot="tier" class="p-6 text-left font-normal align-top h-full">
+        <th scope="col" data-slot="tier" class="p-6 text-left rtl:text-right font-normal align-top h-full">
           <div data-slot="tierWrapper" class="flex flex-col md:h-full">
             <div data-slot="tierTitleWrapper" class="flex items-center gap-3">
               <div data-slot="tierTitle" class="text-lg font-semibold text-highlighted">Enterprise</div>
@@ -3708,7 +3708,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
     </thead>
     <tbody data-slot="tbody" class="">
       <tr data-slot="tr" class="">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Features</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -3716,7 +3716,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited projects</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3730,7 +3730,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited members</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3744,7 +3744,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Unlimited integrations</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3758,7 +3758,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         </td>
       </tr>
       <tr data-slot="tr" class="*:pt-8">
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="sectionTitle" class="font-semibold text-sm text-highlighted">Support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
@@ -3766,7 +3766,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default"></td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">Email support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">
@@ -3780,7 +3780,7 @@ exports[`PricingTable > renders with ui correctly 1`] = `
         </td>
       </tr>
       <tr>
-        <th scope="row" data-slot="th" class="py-4 font-normal text-left border-b border-default">
+        <th scope="row" data-slot="th" class="py-4 font-normal text-left rtl:text-right border-b border-default">
           <div data-slot="featureTitle" class="text-sm text-default">24/7 support</div>
         </th>
         <td data-slot="td" class="px-6 py-4 text-center border-b border-default">