@carlonicora/nextjs-jsonapi 3.3.9 → 3.4.1

package/src/features/billing/components/cards/CustomerInfoCard.tsx

@@ -103,7 +103,7 @@ export function CustomerInfoCard({ customer, loading, error }: CustomerInfoCardP
           )}
           <Button variant="outline" size="sm" className="mt-2" onClick={handlePortalClick} disabled={portalLoading}>
             {portalLoading ? "Loading..." : "Manage in Stripe Portal"}
-            <ExternalLink className="h-4 w-4 ml-1" />
+            <ExternalLink className="h-4 w-4 ms-1" />
           </Button>
         </div>
       </CardContent>

package/src/features/billing/components/cards/InvoicesSummaryCard.tsx

@@ -103,7 +103,7 @@ export function InvoicesSummaryCard({ invoices, loading, error, onViewAllClick }
               {openInvoices.length > 0 && <span className="text-warning">{openInvoices.length} open</span>}
               <span className="flex items-center">
                 View all
-                <ChevronRight className="h-3 w-3 ml-1" />
+                <ChevronRight className="h-3 w-3 ms-1 rtl:rotate-180" />
               </span>
             </div>
           </div>

package/src/features/billing/components/cards/PaymentMethodSummaryCard.tsx

@@ -85,7 +85,7 @@ export function PaymentMethodSummaryCard({
               }}
             >
               Add Card
-              <ChevronRight className="h-4 w-4 ml-1" />
+              <ChevronRight className="h-4 w-4 ms-1 rtl:rotate-180" />
             </Button>
           </div>
         ) : defaultMethod?.card ? (

package/src/features/billing/components/cards/SubscriptionSummaryCard.tsx

@@ -106,7 +106,7 @@ export function SubscriptionSummaryCard({
               }}
             >
               View Plans
-              <ChevronRight className="h-4 w-4 ml-1" />
+              <ChevronRight className="h-4 w-4 ms-1 rtl:rotate-180" />
             </Button>
           </div>
         ) : primarySubscription ? (

package/src/features/billing/components/containers/BillingDashboardContainer.tsx

@@ -360,7 +360,7 @@ export function BillingDashboardContainer() {
             <Button onClick={handleCreateCustomer} disabled={creatingCustomer} size="lg">
               {creatingCustomer ? (
                 <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  <Loader2 className="me-2 h-4 w-4 animate-spin" />
                   Setting up...
                 </>
               ) : (

package/src/features/billing/stripe-customer/components/details/PaymentMethodCard.tsx

@@ -91,7 +91,7 @@ export function PaymentMethodCard({ paymentMethod, onUpdate }: PaymentMethodCard
       <Card className="relative">
         {/* Default Badge */}
         {isDefault && (
-          <Badge variant="softGreen" className="absolute right-2 top-2">
+          <Badge variant="softGreen" className="absolute end-2 top-2">
             Default
           </Badge>
         )}

package/src/features/billing/stripe-invoice/components/details/InvoiceDetails.tsx

@@ -95,14 +95,14 @@ export function InvoiceDetails({
               <table className="w-full">
                 <thead className="bg-muted">
                   <tr>
-                    <th className="text-left p-3 text-sm font-medium">Description</th>
-                    <th className="text-right p-3 text-sm font-medium">Amount</th>
+                    <th className="text-start p-3 text-sm font-medium">Description</th>
+                    <th className="text-end p-3 text-sm font-medium">Amount</th>
                   </tr>
                 </thead>
                 <tbody>
                   <tr className="border-t">
                     <td className="p-3">{productName}</td>
-                    <td className="p-3 text-right">{formatCurrency(invoice.subtotal, invoice.currency)}</td>
+                    <td className="p-3 text-end">{formatCurrency(invoice.subtotal, invoice.currency)}</td>
                   </tr>
                 </tbody>
               </table>
@@ -149,21 +149,21 @@ export function InvoiceDetails({
           <div className="flex flex-wrap gap-2 pt-4 border-t">
             {invoice.stripePdfUrl && (
               <Button variant="outline" onClick={handleDownloadPDF}>
-                <Download className="mr-2 h-4 w-4" />
+                <Download className="me-2 h-4 w-4" />
                 Download PDF
               </Button>
             )}
 
             {invoice.status === InvoiceStatus.OPEN && invoice.attempted && (
               <Button variant="default" onClick={handleRetryPayment}>
-                <RefreshCw className="mr-2 h-4 w-4" />
+                <RefreshCw className="me-2 h-4 w-4" />
                 Retry Payment
               </Button>
             )}
 
             {invoice.stripeHostedInvoiceUrl && (
               <Button variant="outline" onClick={handleViewInStripe}>
-                <ExternalLink className="mr-2 h-4 w-4" />
+                <ExternalLink className="me-2 h-4 w-4" />
                 View in Stripe
               </Button>
             )}

package/src/features/billing/stripe-invoice/components/lists/InvoicesList.tsx

@@ -36,7 +36,7 @@ export function InvoicesList({ invoices, onInvoicesChange }: InvoicesListProps)
               <TableHead>Invoice #</TableHead>
               <TableHead>Date</TableHead>
               <TableHead>Status</TableHead>
-              <TableHead className="text-right">Amount</TableHead>
+              <TableHead className="text-end">Amount</TableHead>
               <TableHead>Period</TableHead>
             </TableRow>
           </TableHeader>
@@ -58,7 +58,7 @@ export function InvoicesList({ invoices, onInvoicesChange }: InvoicesListProps)
                   <TableCell>
                     <InvoiceStatusBadge status={invoice.status} />
                   </TableCell>
-                  <TableCell className="text-right font-medium">{amount}</TableCell>
+                  <TableCell className="text-end font-medium">{amount}</TableCell>
                   <TableCell className="text-muted-foreground text-xs">{period}</TableCell>
                 </TableRow>
               );

package/src/features/billing/stripe-price/hooks/useStripePriceTableStructure.tsx

@@ -49,9 +49,9 @@ export const useStripePriceTableStructure: UseTableStructureHook<StripePriceInte
       header: t("billing.admin.prices.fields.amount"),
       cell: ({ row }: { row: TableContent<StripePriceInterface> }) => {
         const price: StripePriceInterface = row.original.jsonApiData;
-        // Typography role 15 (numeric): tabular-nums, right-aligned. NEVER font-mono.
+        // Typography role 15 (numeric): tabular-nums, end-aligned. NEVER font-mono.
         return (
-          <span className="block text-xs tabular-nums text-right">
+          <span className="block text-xs tabular-nums text-end">
             {formatCurrency(price.unitAmount, price.currency)}
           </span>
         );
@@ -77,7 +77,7 @@ export const useStripePriceTableStructure: UseTableStructureHook<StripePriceInte
       header: t("billing.admin.prices.fields.token"),
       cell: ({ row }: { row: TableContent<StripePriceInterface> }) => {
         const price: StripePriceInterface = row.original.jsonApiData;
-        return <span className="block text-xs tabular-nums text-right">{price.token ?? ""}</span>;
+        return <span className="block text-xs tabular-nums text-end">{price.token ?? ""}</span>;
       },
       enableSorting: false,
       enableHiding: false,

package/src/features/billing/stripe-product/hooks/useStripeProductTableStructure.tsx

@@ -59,9 +59,9 @@ export const useStripeProductTableStructure: UseTableStructureHook<StripeProduct
       header: t("billing.admin.products.fields.prices"),
       cell: ({ row }: { row: TableContent<StripeProductInterface> }) => {
         const product: StripeProductInterface = row.original.jsonApiData;
-        // Typography role 15 (numeric): tabular-nums, right-aligned. NEVER
+        // Typography role 15 (numeric): tabular-nums, end-aligned. NEVER
         // font-mono — no monospace font is loaded in these apps.
-        return <span className="block text-xs tabular-nums text-right">{product.stripePrices.length}</span>;
+        return <span className="block text-xs tabular-nums text-end">{product.stripePrices.length}</span>;
       },
       enableSorting: false,
       enableHiding: false,

package/src/features/billing/stripe-subscription/components/lists/SubscriptionsList.tsx

@@ -60,8 +60,8 @@ export function SubscriptionsList({ subscriptions, onSubscriptionsChange, onChan
               <TableHead>Status</TableHead>
               <TableHead>Plan</TableHead>
               <TableHead>Period</TableHead>
-              <TableHead className="text-right">Amount</TableHead>
-              <TableHead className="text-right">Actions</TableHead>
+              <TableHead className="text-end">Amount</TableHead>
+              <TableHead className="text-end">Actions</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -84,8 +84,8 @@ export function SubscriptionsList({ subscriptions, onSubscriptionsChange, onChan
                   </TableCell>
                   <TableCell className="font-medium">{formatPlanName(price)}</TableCell>
                   <TableCell className="text-muted-foreground text-sm">{period}</TableCell>
-                  <TableCell className="text-right font-medium">{amount}</TableCell>
-                  <TableCell className="text-right">
+                  <TableCell className="text-end font-medium">{amount}</TableCell>
+                  <TableCell className="text-end">
                     {(subscription.status === SubscriptionStatus.ACTIVE ||
                       subscription.status === SubscriptionStatus.TRIALING) &&
                       onChangePlan && (

package/src/features/billing/stripe-subscription/components/widgets/PricingCard.tsx

@@ -61,7 +61,7 @@ export function PricingCard({
       )}
     >
       {isCurrentPlan && (
-        <Badge variant="secondary" className="absolute top-2 right-2">
+        <Badge variant="secondary" className="absolute top-2 end-2">
           Current
         </Badge>
       )}
@@ -73,7 +73,7 @@ export function PricingCard({
       <CardContent className="pb-4 grow">
         <div className="mb-4">
           <span className="text-3xl font-bold">{formattedPrice}</span>
-          <span className="text-muted-foreground ml-1">{interval}</span>
+          <span className="text-muted-foreground ms-1">{interval}</span>
         </div>
 
         {features.length > 0 && (

package/src/features/billing/stripe-subscription/components/widgets/SubscriptionConfirmation.tsx

@@ -54,7 +54,7 @@ export function SubscriptionConfirmation({ price, isLoading, onConfirm, onCancel
           <Button onClick={onConfirm} disabled={isLoading}>
             {isLoading ? (
               <>
-                <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                <Loader2 className="h-4 w-4 animate-spin me-2" />
                 Processing...
               </>
             ) : (

package/src/features/billing/stripe-subscription/components/wizards/WizardStepReview.tsx

@@ -127,7 +127,7 @@ export function WizardStepReview({
             <p className="font-medium">{selectedPrice.product?.name}</p>
             {selectedPrice.nickname && <p className="text-sm text-muted-foreground">{selectedPrice.nickname}</p>}
           </div>
-          <div className="text-right">
+          <div className="text-end">
             {discountedPrice !== null ? (
               <>
                 <p className="text-sm text-muted-foreground line-through">
@@ -168,7 +168,7 @@ export function WizardStepReview({
             <span className={`font-medium ${isTrialUpgrade ? "text-warning" : "text-foreground"}`}>
               {discountedImmediateCharge !== null ? (
                 <>
-                  <span className="line-through text-muted-foreground mr-2">
+                  <span className="line-through text-muted-foreground me-2">
                     {formatCurrency(prorationPreview.immediateCharge, prorationPreview.currency)}
                   </span>
                   <span className="text-success">

package/src/features/billing/stripe-usage/components/lists/UsageHistoryTable.tsx

@@ -47,7 +47,7 @@ export function UsageHistoryTable({ usageRecords }: UsageHistoryTableProps) {
             <TableRow>
               <TableHead>Date & Time</TableHead>
               <TableHead>Meter Event</TableHead>
-              <TableHead className="text-right">Quantity</TableHead>
+              <TableHead className="text-end">Quantity</TableHead>
               <TableHead>Event ID</TableHead>
             </TableRow>
           </TableHeader>
@@ -60,7 +60,7 @@ export function UsageHistoryTable({ usageRecords }: UsageHistoryTableProps) {
                 <TableRow key={record.id}>
                   <TableCell className="font-medium">{dateTime}</TableCell>
                   <TableCell className="text-muted-foreground">{record.meterEventName}</TableCell>
-                  <TableCell className="text-right font-medium">{quantity}</TableCell>
+                  <TableCell className="text-end font-medium">{quantity}</TableCell>
                   <TableCell className="text-muted-foreground text-sm tabular-nums">{record.stripeEventId}</TableCell>
                 </TableRow>
               );

package/src/features/company/components/forms/CompanyDeleter.tsx

@@ -99,7 +99,7 @@ function CompanyDeleterInternal({ company, isAdministrator }: CompanyDeleterInte
             <div className="flex w-full flex-col">
               <Label className="flex items-center">
                 {t(`company.fields.name.label`)}
-                <span className="ml-1 text-destructive">*</span>
+                <span className="ms-1 text-destructive">*</span>
               </Label>
               <Input
                 className={`w-full`}
@@ -109,7 +109,7 @@ function CompanyDeleterInternal({ company, isAdministrator }: CompanyDeleterInte
             </div>
           </div>
           <div className="flex justify-end">
-            <Button className="mr-2" variant={"outline"} type={`button`} onClick={() => setOpen(false)}>
+            <Button className="me-2" variant={"outline"} type={`button`} onClick={() => setOpen(false)}>
               {t(`ui.buttons.cancel`)}
             </Button>
             <Button
@@ -136,7 +136,7 @@ function CompanyDeleterInternal({ company, isAdministrator }: CompanyDeleterInte
           </AlertDialogHeader>
           <div className="bg-destructive/10 border-destructive text-destructive rounded-md border p-4 text-sm">
             <p className="mb-3 font-semibold">{t(`common.delete.finalWarning.description`)}</p>
-            <ul className="list-disc space-y-1 pl-5">
+            <ul className="list-disc space-y-1 ps-5">
               <li>{t(`common.delete.finalWarning.bullet1`)}</li>
               <li>{t(`common.delete.finalWarning.bullet2`)}</li>
               <li>{t(`common.delete.finalWarning.bullet3`)}</li>
@@ -145,7 +145,7 @@ function CompanyDeleterInternal({ company, isAdministrator }: CompanyDeleterInte
             </ul>
           </div>
           <div className="flex justify-end">
-            <Button className="mr-2" variant={"outline"} type={`button`} onClick={handleGoBack} disabled={isDeleting}>
+            <Button className="me-2" variant={"outline"} type={`button`} onClick={handleGoBack} disabled={isDeleting}>
               {t(`ui.buttons.go_back`)}
             </Button>
             <Button

package/src/features/content/hooks/useContentTableStructure.tsx

@@ -75,7 +75,7 @@ export const useContentTableStructure = <U extends string = ContentFields>(
         return (
           <div className="relative flex h-5 w-20 items-center justify-center overflow-clip rounded border text-center">
             <div
-              className={`bg-accent absolute top-0 left-0 h-full opacity-${Math.round(content.relevance)}`}
+              className={`bg-accent absolute top-0 start-0 h-full opacity-${Math.round(content.relevance)}`}
               style={{ width: `${content.relevance}%` }}
             ></div>
             <span

package/src/features/feature/components/forms/FormFeatures.tsx

@@ -37,7 +37,7 @@ export function FormFeatures({ form, name, features, featureField = "featureIds"
         </SectionHeader>
       )}
       <ScrollArea className="h-[40vh]">
-        <div className="flex flex-col gap-y-2 pr-4">
+        <div className="flex flex-col gap-y-2 pe-4">
           {features
             .filter((feature) => !feature.isCore)
             .map((feature) => (
@@ -49,7 +49,7 @@ export function FormFeatures({ form, name, features, featureField = "featureIds"
                     toggleFeature(feature, val === true);
                   }}
                 />
-                <Label htmlFor={feature.id} className="ml-3 cursor-pointer font-normal">
+                <Label htmlFor={feature.id} className="ms-3 cursor-pointer font-normal">
                   {feature.name}
                 </Label>
               </div>

package/src/features/help/components/HelpAssistantSheet.tsx

@@ -10,8 +10,9 @@ export function HelpAssistantSheet({ open, onOpenChange }: { open: boolean; onOp
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent
-        side="right"
-        className="flex w-full flex-col data-[side=right]:sm:max-w-2xl data-[side=right]:lg:max-w-3xl"
+        side="end"
+        /* rtl-ok: keyed to the resolved physical side ("right" in LTR, "left" in RTL) */
+        className="flex w-full flex-col data-[side=right]:sm:max-w-2xl data-[side=right]:lg:max-w-3xl data-[side=left]:sm:max-w-2xl data-[side=left]:lg:max-w-3xl"
       >
         <AssistantProvider manageUrl={false}>
           <HelpAssistantSheetBody />

package/src/features/help/components/HelpHint.tsx

@@ -52,7 +52,7 @@ export function HelpHint({ contextKey }: { contextKey: string }) {
       <SheetTrigger render={<Button variant="ghost" size="icon-sm" aria-label={t("help.hint.trigger")} />}>
         <HelpCircleIcon className="h-4 w-4" />
       </SheetTrigger>
-      <SheetContent side="right" className="w-full max-w-md sm:max-w-lg">
+      <SheetContent side="end" className="w-full max-w-md sm:max-w-lg">
         <SheetHeader>
           <SheetTitle>{active ? active.name : t("help.hint.pickArticle")}</SheetTitle>
           <SheetDescription>{active?.summary ?? ""}</SheetDescription>
@@ -71,7 +71,7 @@ export function HelpHint({ contextKey }: { contextKey: string }) {
                 <button
                   type="button"
                   onClick={() => setPicked(a)}
-                  className="hover:bg-muted block w-full rounded px-2 py-1 text-left text-sm"
+                  className="hover:bg-muted block w-full rounded px-2 py-1 text-start text-sm"
                 >
                   <div className="font-medium">{a.name}</div>
                   <div className="text-muted-foreground text-xs">{a.summary}</div>

package/src/features/help/components/HelpTOC.tsx

@@ -30,7 +30,7 @@ export function HelpTOC({ headings }: { headings: readonly HelpHeading[] }) {
       <MicroLabel className="mb-2">{t("help.toc.title")}</MicroLabel>
       <ul className="space-y-1 text-sm">
         {headings.map((h) => (
-          <li key={h.slug} style={{ paddingLeft: `${(h.depth - 2) * 0.75}rem` }}>
+          <li key={h.slug} style={{ paddingInlineStart: `${(h.depth - 2) * 0.75}rem` }}>
             <a
               href={`#${h.slug}`}
               className={

package/src/features/how-to/components/containers/HowToCommand.tsx

@@ -184,7 +184,7 @@ export default function HowToCommand({ pathname, extraGroups, onStartChat }: How
                   <CommandGroup heading={t(`howto.command.relevant`)}>
                     {relevantHowTos.map((howTo: HowToInterface) => (
                       <CommandItem key={howTo.id} onSelect={() => setSelectedHowTo(howTo)} className="cursor-pointer">
-                        <ArrowRight className="h-4 w-4" />
+                        <ArrowRight className="h-4 w-4 rtl:rotate-180" />
                         <span>{howTo.name}</span>
                       </CommandItem>
                     ))}
@@ -196,7 +196,7 @@ export default function HowToCommand({ pathname, extraGroups, onStartChat }: How
                   <CommandGroup heading={searchTerm ? undefined : t(`howto.command.all`)}>
                     {otherHowTos.map((howTo: HowToInterface) => (
                       <CommandItem key={howTo.id} onSelect={() => setSelectedHowTo(howTo)} className="cursor-pointer">
-                        <ArrowRight className="h-4 w-4" />
+                        <ArrowRight className="h-4 w-4 rtl:rotate-180" />
                         <span>{howTo.name}</span>
                       </CommandItem>
                     ))}

package/src/features/how-to/components/containers/HowToCommandViewer.tsx

@@ -27,8 +27,8 @@ export default function HowToCommandViewer({ howTo, onBack, onStartChat }: HowTo
       {/* Header with back button, title, and reading time */}
       <div className="flex items-center gap-3 border-b px-4 py-3">
         <Button variant="ghost" size="sm" onClick={onBack} className="h-8 px-2">
-          <ArrowLeft className="h-4 w-4" />
-          <span className="ml-1">{t("howto.command.back")}</span>
+          <ArrowLeft className="h-4 w-4 rtl:rotate-180" />
+          <span className="ms-1">{t("howto.command.back")}</span>
         </Button>
         <SectionHeader level={2} className="flex-1 truncate">
           {howTo.name}
@@ -43,14 +43,14 @@ export default function HowToCommandViewer({ howTo, onBack, onStartChat }: HowTo
       <div className="flex min-h-0 flex-1">
         {/* Left sidebar - table of contents */}
         {headings.length > 0 && (
-          <div className="w-50 shrink-0 overflow-y-auto border-r p-4">
+          <div className="w-50 shrink-0 overflow-y-auto border-e p-4">
             <nav className="space-y-1">
               {headings.map((heading) => (
                 <a
                   key={heading.id}
                   href={`#${heading.id}`}
                   className="text-muted-foreground hover:text-foreground block truncate text-sm"
-                  style={{ paddingLeft: `${(heading.level - 1) * 0.75}rem` }}
+                  style={{ paddingInlineStart: `${(heading.level - 1) * 0.75}rem` }}
                 >
                   {heading.text}
                 </a>
@@ -69,7 +69,7 @@ export default function HowToCommandViewer({ howTo, onBack, onStartChat }: HowTo
       {onStartChat && (
         <div className="flex items-center justify-end gap-2 border-t px-4 py-3">
           <Button onClick={onStartChat} variant="default" size="sm">
-            <MessageSquare className="mr-2 h-4 w-4" />
+            <MessageSquare className="me-2 h-4 w-4" />
             {t("howto.command.chat_button")}
           </Button>
         </div>

package/src/features/how-to/components/forms/HowToEditor.tsx

@@ -77,11 +77,11 @@ function PageSelector({
         <PopoverContent align="start" className="w-(--anchor-width) p-0">
           <Command shouldFilter={false}>
             <div className="relative w-full border-b">
-              <SearchIcon className="text-muted-foreground absolute top-2.5 left-2.5 h-4 w-4" />
+              <SearchIcon className="text-muted-foreground absolute top-2.5 start-2.5 h-4 w-4" />
               <Input
                 placeholder={placeholder}
                 type="text"
-                className="rounded-none border-0 pl-8 focus-visible:ring-0"
+                className="rounded-none border-0 ps-8 focus-visible:ring-0"
                 onChange={(e) => setSearch(e.target.value)}
                 value={search}
               />
@@ -339,7 +339,7 @@ function HowToEditorInternal({
               />
             ))}
             <Button type="button" variant="outline" size="sm" onClick={addPage}>
-              <PlusIcon className="mr-2 h-4 w-4" />
+              <PlusIcon className="me-2 h-4 w-4" />
               {t(`howto.fields.pages.add`)}
             </Button>
           </div>

package/src/features/how-to/components/forms/HowToSelector.tsx

@@ -111,7 +111,7 @@ export default function HowToSelector({
               </PopoverTrigger>
               {field.value && (
                 <CircleX
-                  className="text-muted hover:text-destructive ml-2 h-4 w-4 shrink-0 cursor-pointer"
+                  className="text-muted hover:text-destructive ms-2 h-4 w-4 shrink-0 cursor-pointer"
                   onClick={() => setHowTo()}
                 />
               )}
@@ -119,19 +119,19 @@ export default function HowToSelector({
             <PopoverContent align="start" className="w-(--anchor-width)">
               <Command shouldFilter={false}>
                 <div className="relative mb-2 w-full">
-                  <SearchIcon className="text-muted-foreground absolute top-2.5 left-2.5 h-4 w-4" />
+                  <SearchIcon className="text-muted-foreground absolute top-2.5 start-2.5 h-4 w-4" />
                   <Input
                     placeholder={t(`generic.search.placeholder`, { type: t(`entities.howtos`, { count: 1 }) })}
                     type="text"
-                    className="w-full pr-8 pl-8"
+                    className="w-full pe-8 ps-8"
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
                     value={searchTerm}
                   />
                   {isSearching ? (
-                    <RefreshCwIcon className="text-muted-foreground absolute top-2.5 right-2.5 h-4 w-4 animate-spin" />
+                    <RefreshCwIcon className="text-muted-foreground absolute top-2.5 end-2.5 h-4 w-4 animate-spin" />
                   ) : searchTermRef.current ? (
                     <XIcon
-                      className={`absolute top-2.5 right-2.5 h-4 w-4 ${searchTermRef.current ? "cursor-pointer" : "text-muted-foreground"}`}
+                      className={`absolute top-2.5 end-2.5 h-4 w-4 ${searchTermRef.current ? "cursor-pointer" : "text-muted-foreground"}`}
                       onClick={() => {
                         setSearchTerm("");
                         search("");

package/src/features/notification/components/lists/NotificationsList.tsx

@@ -44,7 +44,7 @@ export function NotificationsList({ archived }: NotificationsListProps) {
         <Card key={i}>
           <CardContent className="p-2">
             <div className="flex w-full flex-row items-center">
-              <Skeleton className="mr-4 h-8 w-8 rounded-full" />
+              <Skeleton className="me-4 h-8 w-8 rounded-full" />
               <div className="flex-1 space-y-2">
                 <Skeleton className="h-4 w-3/4" />
                 <Skeleton className="h-3 w-1/2" />
@@ -108,7 +108,7 @@ export function NotificationsList({ archived }: NotificationsListProps) {
                               e.stopPropagation();
                               archiveNotification(notification);
                             }}
-                            className="text-muted-foreground hover:text-destructive ml-2"
+                            className="text-muted-foreground hover:text-destructive ms-2"
                           >
                             <ArchiveIcon className="h-4 w-4 cursor-pointer" />
                           </Button>

package/src/features/notification/components/modals/NotificationModal.tsx

@@ -200,7 +200,7 @@ function NotificationModalContent({ isOpen, setIsOpen }: NotificationModalProps)
           {t(`entities.notifications`, { count: 2 })}
         </SidebarMenuButton>
       </PopoverTrigger>
-      <PopoverContent className="relative left-10 w-80 border-0 p-0 shadow-none">
+      <PopoverContent className="relative start-10 w-80 border-0 p-0 shadow-none">
         <Card>
           <CardHeader className="p-4">
             <CardTitle>{t(`entities.notifications`, { count: 2 })}</CardTitle>

package/src/features/oauth/components/OAuthClientCard.tsx

@@ -68,7 +68,7 @@ export function OAuthClientCard({ client, onClick, onEdit, onDelete }: OAuthClie
                         onEdit();
                       }}
                     >
-                      <Pencil className="h-4 w-4 mr-2" />
+                      <Pencil className="h-4 w-4 me-2" />
                       Edit
                     </DropdownMenuItem>
                   )}
@@ -80,7 +80,7 @@ export function OAuthClientCard({ client, onClick, onEdit, onDelete }: OAuthClie
                       }}
                       className="text-destructive"
                     >
-                      <Trash2 className="h-4 w-4 mr-2" />
+                      <Trash2 className="h-4 w-4 me-2" />
                       Delete
                     </DropdownMenuItem>
                   )}

package/src/features/oauth/components/OAuthClientDetail.tsx

@@ -194,13 +194,13 @@ export function OAuthClientDetail({
           <div className="flex gap-3 pt-4">
             {onEdit && (
               <Button variant="outline" onClick={onEdit} disabled={isLoading}>
-                <Pencil className="h-4 w-4 mr-2" />
+                <Pencil className="h-4 w-4 me-2" />
                 Edit
               </Button>
             )}
             {onDelete && (
               <Button variant="destructive" onClick={() => setShowDeleteConfirm(true)} disabled={isLoading}>
-                <Trash2 className="h-4 w-4 mr-2" />
+                <Trash2 className="h-4 w-4 me-2" />
                 Delete
               </Button>
             )}

package/src/features/oauth/components/OAuthClientList.tsx

@@ -80,7 +80,7 @@ export function OAuthClientList({
           <SectionHeader level={2}>{title}</SectionHeader>
           {onCreateClick && (
             <Button onClick={onCreateClick}>
-              <Plus className="h-4 w-4 mr-2" />
+              <Plus className="h-4 w-4 me-2" />
               New App
             </Button>
           )}
@@ -91,7 +91,7 @@ export function OAuthClientList({
           <p className="text-muted-foreground mb-4">{emptyStateMessage}</p>
           {onCreateClick && (
             <Button onClick={onCreateClick}>
-              <Plus className="h-4 w-4 mr-2" />
+              <Plus className="h-4 w-4 me-2" />
               Create Application
             </Button>
           )}
@@ -107,7 +107,7 @@ export function OAuthClientList({
         <SectionHeader level={2}>{title}</SectionHeader>
         {onCreateClick && (
           <Button onClick={onCreateClick}>
-            <Plus className="h-4 w-4 mr-2" />
+            <Plus className="h-4 w-4 me-2" />
             New App
           </Button>
         )}

package/src/features/oauth/components/OAuthRedirectUriInput.tsx

@@ -135,7 +135,7 @@ export function OAuthRedirectUriInput({
       </div>
 
       <Button type="button" variant="outline" size="sm" onClick={handleAdd} disabled={disabled} className="mt-2">
-        <Plus className="h-4 w-4 mr-2" />
+        <Plus className="h-4 w-4 me-2" />
         Add Redirect URI
       </Button>
 

package/src/features/oauth/components/OAuthScopeSelector.tsx

@@ -78,7 +78,7 @@ export function OAuthScopeSelector({
         {Object.entries(groupedScopes).map(([groupName, scopes]) => (
           <div key={groupName} className="space-y-2">
             <h4 className="text-sm font-medium capitalize">{groupName}</h4>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-2 pl-2">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ps-2">
               {scopes.map((scopeInfo) => {
                 const isChecked = value.includes(scopeInfo.scope);
                 const isAdmin = scopeInfo.scope === "admin";
@@ -99,7 +99,7 @@ export function OAuthScopeSelector({
                     <div className="flex-1">
                       <Label htmlFor={`scope-${scopeInfo.scope}`} className="cursor-pointer">
                         {scopeInfo.name}
-                        {isAdmin && <span className="ml-2 text-xs text-destructive">(Dangerous)</span>}
+                        {isAdmin && <span className="ms-2 text-xs text-destructive">(Dangerous)</span>}
                       </Label>
                       <p className="text-xs text-muted-foreground">{scopeInfo.description}</p>
                     </div>

package/src/features/onboarding/components/OnboardingCard.tsx

@@ -18,13 +18,7 @@ export function OnboardingCard({
 }: OnboardingCardRenderProps) {
   return (
     <Card className="w-[320px] relative" data-shepherd-card>
-      <Button
-        variant="ghost"
-        size="icon"
-        className="absolute right-2 top-2"
-        onClick={onClose}
-        aria-label={labels.close}
-      >
+      <Button variant="ghost" size="icon" className="absolute end-2 top-2" onClick={onClose} aria-label={labels.close}>
         <X className="h-4 w-4" />
       </Button>
       <CardHeader>