diff --git a/app/assets/main.css b/app/assets/main.css
index 00bc23b8f5..b64bfcbe2d 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -80,6 +80,10 @@ html {
   }
 }
 
+html[dir='rtl'] .rtl-flip {
+  transform: scale(-1, 1);
+}
+
 body {
   margin: 0;
   background-color: var(--bg);
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index bd0b8672fd..8a507d50db 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -1,54 +1,56 @@
+<script setup lang="ts"></script>
 <template>
   <footer class="border-t border-border mt-auto" :aria-label="$t('footer.site_footer')">
     <div class="container py-3 sm:py-8 flex flex-col gap-2 sm:gap-4 text-fg-subtle text-sm">
-      <div class="flex flex-col sm:flex-row items-center justify-between gap-2 sm:gap-4">
+      <div class="flex flex-col sm:flex-row items-center justify-start gap-2 sm:gap-4">
         <p class="font-mono m-0 hidden sm:block">{{ $t('tagline') }}</p>
-        <div class="flex items-center gap-3 sm:gap-6">
+        <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
+        <div class="flex items-center justify-start gap-3 sm:gap-6">
           <NuxtLink
             to="/about"
             class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center"
           >
-            {{ $t('footer.about') }}
+            <span>{{ $t('footer.about') }}</span>
           </NuxtLink>
           <a
             href="https://docs.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center justify-start gap-1"
           >
-            {{ $t('footer.docs') }}
-            <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
+            <span>{{ $t('footer.docs') }}</span>
+            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
           <a
             href="https://repo.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex justify-start items-center gap-1"
           >
-            {{ $t('footer.source') }}
-            <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
+            <span>{{ $t('footer.source') }}</span>
+            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
           <a
             href="https://social.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center justify-start gap-1"
           >
-            {{ $t('footer.social') }}
-            <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
+            <span>{{ $t('footer.social') }}</span>
+            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
           <a
             href="https://chat.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center justify-start gap-1"
           >
-            {{ $t('footer.chat') }}
-            <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
+            <span>{{ $t('footer.chat') }}</span>
+            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
         </div>
       </div>
-      <p class="text-xs text-fg-muted text-center sm:text-left m-0">
+      <p class="text-xs text-fg-muted text-center sm:text-start m-0">
         <span class="sm:hidden">{{ $t('non_affiliation_disclaimer') }}</span>
         <span class="hidden sm:inline">{{ $t('trademark_disclaimer') }}</span>
       </p>
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 19f03177f2..6ca6c60eb9 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -54,8 +54,11 @@ onKeyStroke(',', e => {
     :aria-label="$t('header.site_header')"
     class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border"
   >
-    <nav :aria-label="$t('nav.main_navigation')" class="container h-14 flex items-center">
-      <!-- Left: Logo -->
+    <nav
+      :aria-label="$t('nav.main_navigation')"
+      class="container h-14 flex items-center justify-start"
+    >
+      <!-- Start: Logo -->
       <div class="flex-shrink-0">
         <NuxtLink
           v-if="showLogo"
@@ -87,7 +90,7 @@ onKeyStroke(',', e => {
             <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
               <div class="search-box relative flex items-center">
                 <span
-                  class="absolute left-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none group-focus-within:text-accent z-1"
+                  class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none group-focus-within:text-accent z-1"
                 >
                   /
                 </span>
@@ -99,7 +102,7 @@ onKeyStroke(',', e => {
                   name="q"
                   :placeholder="$t('search.placeholder')"
                   v-bind="noCorrect"
-                  class="w-full bg-bg-subtle border border-border rounded-md pl-7 pr-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-border-color duration-300 motion-reduce:transition-none focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+                  class="w-full bg-bg-subtle border border-border rounded-md ps-7 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-border-color duration-300 motion-reduce:transition-none focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
                   @input="handleSearchInput"
                   @focus="isSearchFocused = true"
                   @blur="isSearchFocused = false"
@@ -123,8 +126,8 @@ onKeyStroke(',', e => {
         </ul>
       </div>
 
-      <!-- Right: User status + GitHub -->
-      <div class="flex-shrink-0 flex items-center gap-4 sm:gap-6 ml-auto sm:ml-0">
+      <!-- End: User status + GitHub -->
+      <div class="flex-shrink-0 flex items-center gap-4 sm:gap-6 ms-auto sm:ms-0">
         <NuxtLink
           to="/about"
           class="sm:hidden link-subtle font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
diff --git a/app/components/AppTooltip.vue b/app/components/AppTooltip.vue
index 575149d50a..8d40185f45 100644
--- a/app/components/AppTooltip.vue
+++ b/app/components/AppTooltip.vue
@@ -10,10 +10,10 @@ const isVisible = shallowRef(false)
 const tooltipId = useId()
 
 const positionClasses: Record<string, string> = {
-  top: 'bottom-full left-1/2 -translate-x-1/2 mb-1',
-  bottom: 'top-full left-0 mt-1',
-  left: 'right-full top-1/2 -translate-y-1/2 mr-2',
-  right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+  top: 'bottom-full inset-is-1/2 -translate-x-1/2 mb-1',
+  bottom: 'top-full inset-is-0 me-1',
+  left: 'right-full top-1/2 -translate-y-1/2 me-2',
+  right: 'left-full top-1/2 -translate-y-1/2 ms-2',
 }
 
 const tooltipPosition = computed(() => positionClasses[props.position || 'bottom'])
diff --git a/app/components/CodeDirectoryListing.vue b/app/components/CodeDirectoryListing.vue
index 431c6cbe61..b14300bc97 100644
--- a/app/components/CodeDirectoryListing.vue
+++ b/app/components/CodeDirectoryListing.vue
@@ -97,7 +97,7 @@ function formatBytes(bytes: number): string {
               <span>{{ node.name }}</span>
             </NuxtLink>
           </td>
-          <td class="py-2 px-4 text-right font-mono text-xs text-fg-subtle">
+          <td class="py-2 px-4 text-end font-mono text-xs text-fg-subtle">
             <span v-if="node.type === 'file' && node.size">
               {{ formatBytes(node.size) }}
             </span>
diff --git a/app/components/CodeFileTree.vue b/app/components/CodeFileTree.vue
index 89a2866b21..e9a4d47d61 100644
--- a/app/components/CodeFileTree.vue
+++ b/app/components/CodeFileTree.vue
@@ -39,14 +39,14 @@ watch(
       <template v-if="node.type === 'directory'">
         <button
           type="button"
-          class="w-full flex items-center gap-1.5 py-1.5 px-3 text-left font-mono text-sm transition-colors hover:bg-bg-muted"
+          class="w-full flex items-center gap-1.5 py-1.5 px-3 text-start font-mono text-sm transition-colors hover:bg-bg-muted"
           :class="isNodeActive(node) ? 'text-fg' : 'text-fg-muted'"
           :style="{ paddingLeft: `${depth * 12 + 12}px` }"
           @click="toggleDir(node.path)"
         >
           <span
             class="w-4 h-4 shrink-0 transition-transform"
-            :class="[isExpanded(node.path) ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right']"
+            :class="[isExpanded(node.path) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right']"
           />
           <span
             class="w-4 h-4 shrink-0"
diff --git a/app/components/CodeMobileTreeDrawer.vue b/app/components/CodeMobileTreeDrawer.vue
index 7e1087a9ad..392079c429 100644
--- a/app/components/CodeMobileTreeDrawer.vue
+++ b/app/components/CodeMobileTreeDrawer.vue
@@ -27,7 +27,7 @@ watch(isOpen, open => (isLocked.value = open))
   <!-- Toggle button (mobile only) -->
   <button
     type="button"
-    class="md:hidden fixed bottom-4 right-4 z-40 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors"
+    class="md:hidden fixed bottom-4 inset-ie-4 z-40 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors"
     :aria-label="$t('code.toggle_tree')"
     @click="isOpen = !isOpen"
   >
@@ -57,7 +57,7 @@ watch(isOpen, open => (isLocked.value = open))
   >
     <aside
       v-if="isOpen"
-      class="md:hidden fixed inset-y-0 left-0 z-50 w-72 bg-bg-subtle border-r border-border overflow-y-auto"
+      class="md:hidden fixed inset-y-0 inset-is-0 z-50 w-72 bg-bg-subtle border-ie border-border overflow-y-auto"
     >
       <div
         class="sticky top-0 bg-bg-subtle border-b border-border px-4 py-3 flex items-center justify-between"
diff --git a/app/components/CodeViewer.vue b/app/components/CodeViewer.vue
index 8bf3e02639..fb6b2a571e 100644
--- a/app/components/CodeViewer.vue
+++ b/app/components/CodeViewer.vue
@@ -58,7 +58,7 @@ watch(
   <div class="code-viewer flex min-h-full">
     <!-- Line numbers column -->
     <div
-      class="line-numbers shrink-0 bg-bg-subtle border-r border-border text-right select-none"
+      class="line-numbers shrink-0 bg-bg-subtle border-ie border-border text-end select-none"
       aria-hidden="true"
     >
       <a
diff --git a/app/components/ConnectorModal.vue b/app/components/ConnectorModal.vue
index 27582102c5..70bf8188c5 100644
--- a/app/components/ConnectorModal.vue
+++ b/app/components/ConnectorModal.vue
@@ -124,13 +124,13 @@ watch(open, isOpen => {
                 class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"
               >
                 <span class="text-fg-subtle">$</span>
-                <span class="text-fg-subtle ml-2">{{ executeNpmxConnectorCommand }}</span>
+                <span class="text-fg-subtle ms-2">{{ executeNpmxConnectorCommand }}</span>
                 <button
                   type="button"
                   :aria-label="
                     copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
                   "
-                  class="ml-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+                  class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
                   @click="copyCommand"
                 >
                   <span v-if="!copied" class="i-carbon-copy block w-5 h-5" aria-hidden="true" />
diff --git a/app/components/ConnectorStatus.client.vue b/app/components/ConnectorStatus.client.vue
index 28c993870e..8598daa96d 100644
--- a/app/components/ConnectorStatus.client.vue
+++ b/app/components/ConnectorStatus.client.vue
@@ -75,7 +75,7 @@ const ariaLabel = computed(() => {
       <!-- Operation count badge (overlaid) -->
       <span
         v-if="isConnected && operationCount > 0"
-        class="absolute -top-0.5 -right-0.5 min-w-[1rem] h-4 px-1 flex items-center justify-center font-mono text-[10px] rounded-full"
+        class="absolute -top-0.5 -inset-ie-0.5 min-w-[1rem] h-4 px-1 flex items-center justify-center font-mono text-[10px] rounded-full"
         :class="hasPendingOperations ? 'bg-yellow-500 text-black' : 'bg-blue-500 text-white'"
         aria-hidden="true"
       >
@@ -93,7 +93,7 @@ const ariaLabel = computed(() => {
       <div
         v-if="showTooltip"
         role="tooltip"
-        class="absolute right-0 top-full mt-2 px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-nowrap z-50"
+        class="absolute inset-ie-0 top-full mt-2 px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-nowrap z-50"
       >
         {{ tooltipText }}
       </div>
diff --git a/app/components/DependencyPathPopup.vue b/app/components/DependencyPathPopup.vue
index 65d7b9a801..1bd9a4759f 100644
--- a/app/components/DependencyPathPopup.vue
+++ b/app/components/DependencyPathPopup.vue
@@ -89,7 +89,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
           class="font-mono text-xs"
           :style="{ paddingLeft: `${idx * 12}px` }"
         >
-          <span v-if="idx > 0" class="text-fg-subtle mr-1">└─</span>
+          <span v-if="idx > 0" class="text-fg-subtle me-1">└─</span>
           <NuxtLink
             :to="{
               name: 'package',
@@ -107,7 +107,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
           >
             {{ pathItem }}
           </NuxtLink>
-          <span v-if="idx === path.length - 1" class="ml-1 text-amber-500">⚠</span>
+          <span v-if="idx === path.length - 1" class="ms-1 text-amber-500">⚠</span>
         </li>
       </ul>
     </div>
diff --git a/app/components/HeaderOrgsDropdown.vue b/app/components/HeaderOrgsDropdown.vue
index 0075ff557f..5754043f42 100644
--- a/app/components/HeaderOrgsDropdown.vue
+++ b/app/components/HeaderOrgsDropdown.vue
@@ -75,7 +75,7 @@ function handleKeydown(event: KeyboardEvent) {
       enter-from-class="opacity-0 translate-y-1"
       leave-to-class="opacity-0 translate-y-1"
     >
-      <div v-if="isOpen" class="absolute right-0 top-full pt-2 w-56 z-50">
+      <div v-if="isOpen" class="absolute inset-ie-0 top-full pt-2 w-56 z-50">
         <div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden">
           <div class="px-3 py-2 border-b border-border">
             <span class="font-mono text-xs text-fg-subtle">{{
@@ -112,7 +112,7 @@ function handleKeydown(event: KeyboardEvent) {
               class="link-subtle font-mono text-xs inline-flex items-center gap-1"
             >
               {{ $t('header.orgs_dropdown.view_all') }}
-              <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
+              <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
             </NuxtLink>
           </div>
         </div>
diff --git a/app/components/HeaderPackagesDropdown.vue b/app/components/HeaderPackagesDropdown.vue
index 4c6a09c378..ca9a1cde58 100644
--- a/app/components/HeaderPackagesDropdown.vue
+++ b/app/components/HeaderPackagesDropdown.vue
@@ -75,7 +75,7 @@ function handleKeydown(event: KeyboardEvent) {
       enter-from-class="opacity-0 translate-y-1"
       leave-to-class="opacity-0 translate-y-1"
     >
-      <div v-if="isOpen" class="absolute right-0 top-full pt-2 w-64 z-50">
+      <div v-if="isOpen" class="absolute inset-ie-0 top-full pt-2 w-64 z-50">
         <div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden">
           <div class="px-3 py-2 border-b border-border">
             <span class="font-mono text-xs text-fg-subtle">{{
@@ -112,7 +112,7 @@ function handleKeydown(event: KeyboardEvent) {
               class="link-subtle font-mono text-xs inline-flex items-center gap-1"
             >
               {{ $t('header.packages_dropdown.view_all') }}
-              <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
+              <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
             </NuxtLink>
           </div>
         </div>
diff --git a/app/components/OperationsQueue.vue b/app/components/OperationsQueue.vue
index 8ff188429a..f675343b89 100644
--- a/app/components/OperationsQueue.vue
+++ b/app/components/OperationsQueue.vue
@@ -295,7 +295,7 @@ watch(isExecuting, executing => {
         class="flex items-center gap-2 font-mono text-xs text-fg-muted cursor-pointer hover:text-fg transition-colors duration-200 select-none"
       >
         <span
-          class="i-carbon-chevron-right block w-3 h-3 transition-transform duration-200 [[open]>&]:rotate-90"
+          class="i-carbon:chevron-right rtl-flip block w-3 h-3 transition-transform duration-200 [[open]>&]:rotate-90"
           aria-hidden="true"
         />
         {{ $t('operations.queue.log') }} ({{ completedOperations.length }})
diff --git a/app/components/OrgMembersPanel.vue b/app/components/OrgMembersPanel.vue
index 272174262f..468b2541bf 100644
--- a/app/components/OrgMembersPanel.vue
+++ b/app/components/OrgMembersPanel.vue
@@ -317,7 +317,7 @@ watch(lastExecutionTime, () => {
     <div class="flex flex-wrap items-center gap-2 p-3 border-b border-border bg-bg">
       <div class="flex-1 min-w-[150px] relative">
         <span
-          class="absolute left-2 top-1/2 -translate-y-1/2 i-carbon-search w-3.5 h-3.5 text-fg-subtle"
+          class="absolute inset-is-2 top-1/2 -translate-y-1/2 i-carbon-search w-3.5 h-3.5 text-fg-subtle"
           aria-hidden="true"
         />
         <label for="members-search" class="sr-only">{{ $t('org.members.filter_label') }}</label>
@@ -328,7 +328,7 @@ watch(lastExecutionTime, () => {
           name="members-search"
           :placeholder="$t('org.members.filter_placeholder')"
           v-bind="noCorrect"
-          class="w-full pl-7 pr-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="w-full ps-7 pe-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
         />
       </div>
       <div
@@ -479,7 +479,7 @@ watch(lastExecutionTime, () => {
           </div>
         </div>
         <!-- Team badges -->
-        <div v-if="member.teams.length > 0" class="flex flex-wrap gap-1 pl-0">
+        <div v-if="member.teams.length > 0" class="flex flex-wrap gap-1 ps-0">
           <button
             v-for="team in member.teams"
             :key="team"
diff --git a/app/components/OrgTeamsPanel.vue b/app/components/OrgTeamsPanel.vue
index 7ec9a98a6b..31f5acd248 100644
--- a/app/components/OrgTeamsPanel.vue
+++ b/app/components/OrgTeamsPanel.vue
@@ -286,7 +286,7 @@ watch(lastExecutionTime, () => {
     <div class="flex items-center gap-2 p-3 border-b border-border bg-bg">
       <div class="flex-1 relative">
         <span
-          class="absolute left-2 top-1/2 -translate-y-1/2 i-carbon-search w-3.5 h-3.5 text-fg-subtle"
+          class="absolute inset-is-2 top-1/2 -translate-y-1/2 i-carbon-search w-3.5 h-3.5 text-fg-subtle"
           aria-hidden="true"
         />
         <label for="teams-search" class="sr-only">{{ $t('org.teams.filter_label') }}</label>
@@ -297,7 +297,7 @@ watch(lastExecutionTime, () => {
           name="teams-search"
           :placeholder="$t('org.teams.filter_placeholder')"
           v-bind="noCorrect"
-          class="w-full pl-7 pr-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="w-full ps-7 pe-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
         />
       </div>
       <div
@@ -365,15 +365,15 @@ watch(lastExecutionTime, () => {
         >
           <button
             type="button"
-            class="flex-1 flex items-center gap-2 text-left rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="flex-1 flex items-center gap-2 text-start rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
             :aria-expanded="expandedTeams.has(teamName)"
             :aria-controls="`team-${teamName}-members`"
             @click="toggleTeam(teamName)"
           >
             <span
-              class="w-4 h-4 transition-transform duration-200"
+              class="w-4 h-4 transition-transform duration-200 rtl-flip"
               :class="[
-                expandedTeams.has(teamName) ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right',
+                expandedTeams.has(teamName) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right',
                 'text-fg-muted',
               ]"
               aria-hidden="true"
@@ -408,7 +408,7 @@ watch(lastExecutionTime, () => {
         <div
           v-if="expandedTeams.has(teamName)"
           :id="`team-${teamName}-members`"
-          class="pl-9 pr-3 pb-3"
+          class="ps-9 ps-3 pb-3"
         >
           <!-- Members list -->
           <ul
@@ -419,7 +419,7 @@ watch(lastExecutionTime, () => {
             <li
               v-for="user in teamUsers[teamName]"
               :key="user"
-              class="flex items-center justify-between py-1 pl-2 pr-1 rounded hover:bg-bg-subtle transition-colors duration-200"
+              class="flex items-center justify-between py-1 ps-2 pe-1 rounded hover:bg-bg-subtle transition-colors duration-200"
             >
               <NuxtLink
                 :to="{ name: '~username', params: { username: user } }"
@@ -498,7 +498,7 @@ watch(lastExecutionTime, () => {
         <form class="flex items-center gap-2" @submit.prevent="handleCreateTeam">
           <div class="flex-1 flex items-center">
             <span
-              class="px-2 py-1.5 font-mono text-sm text-fg-subtle bg-bg border border-r-0 border-border rounded-l"
+              class="px-2 py-1.5 font-mono text-sm text-fg-subtle bg-bg border border-ie-0 border-border rounded-is"
             >
               {{ orgName }}:
             </span>
@@ -510,7 +510,7 @@ watch(lastExecutionTime, () => {
               name="new-team-name"
               :placeholder="$t('org.teams.team_name_placeholder')"
               v-bind="noCorrect"
-              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded-r text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded-ie text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
             />
           </div>
           <button
diff --git a/app/components/PackageCard.vue b/app/components/PackageCard.vue
index 0db5531b10..02a7db1124 100644
--- a/app/components/PackageCard.vue
+++ b/app/components/PackageCard.vue
@@ -56,7 +56,7 @@ const emit = defineEmits<{
         >
         <span
           v-if="isExactMatch"
-          class="text-xs px-1.5 py-0.5 ml-2 rounded bg-bg-elevated border border-border-hover text-fg"
+          class="text-xs px-1.5 py-0.5 ms-2 rounded bg-bg-elevated border border-border-hover text-fg"
           >{{ $t('search.exact_match') }}</span
         >
       </component>
diff --git a/app/components/PackageDependencies.vue b/app/components/PackageDependencies.vue
index c7d0f1a2f2..aec989bc6e 100644
--- a/app/components/PackageDependencies.vue
+++ b/app/components/PackageDependencies.vue
@@ -122,7 +122,7 @@ const sortedOptionalDependencies = computed(() => {
             </NuxtLink>
             <NuxtLink
               :to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }"
-              class="font-mono text-xs text-right truncate"
+              class="font-mono text-xs text-end truncate"
               :class="getVersionClass(outdatedDeps[dep])"
               :title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep]) : version"
             >
@@ -198,7 +198,7 @@ const sortedOptionalDependencies = computed(() => {
               name: 'package',
               params: { package: [...peer.name.split('/'), 'v', peer.version] },
             }"
-            class="font-mono text-xs text-fg-subtle max-w-[40%] text-right truncate"
+            class="font-mono text-xs text-fg-subtle max-w-[40%] text-end truncate"
             :title="peer.version"
           >
             {{ peer.version }}
@@ -259,7 +259,7 @@ const sortedOptionalDependencies = computed(() => {
           </NuxtLink>
           <NuxtLink
             :to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }"
-            class="font-mono text-xs text-fg-subtle max-w-[50%] text-right truncate"
+            class="font-mono text-xs text-fg-subtle max-w-[50%] text-end truncate"
             :title="version"
           >
             {{ version }}
diff --git a/app/components/PackageDownloadAnalytics.vue b/app/components/PackageDownloadAnalytics.vue
index 4d62ee4d82..494cfae966 100644
--- a/app/components/PackageDownloadAnalytics.vue
+++ b/app/components/PackageDownloadAnalytics.vue
@@ -762,7 +762,7 @@ const config = computed(() => {
       v-if="pending"
       role="status"
       aria-live="polite"
-      class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-xs text-fg-subtle font-mono bg-bg/70 backdrop-blur px-3 py-2 rounded-md border border-border"
+      class="absolute top-1/2 inset-is-1/2 -translate-x-1/2 -translate-y-1/2 text-xs text-fg-subtle font-mono bg-bg/70 backdrop-blur px-3 py-2 rounded-md border border-border"
     >
       {{ $t('package.downloads.loading') }}
     </div>
diff --git a/app/components/PackageInstallScripts.vue b/app/components/PackageInstallScripts.vue
index c3bad2e9d8..315c9ea96b 100644
--- a/app/components/PackageInstallScripts.vue
+++ b/app/components/PackageInstallScripts.vue
@@ -51,7 +51,7 @@ const isExpanded = shallowRef(false)
         @click="isExpanded = !isExpanded"
       >
         <span
-          class="i-carbon-chevron-right w-3 h-3 transition-transform duration-200"
+          class="i-carbon:chevron-right rtl-flip w-3 h-3 transition-transform duration-200"
           :class="{ 'rotate-90': isExpanded }"
           aria-hidden="true"
         />
@@ -67,7 +67,7 @@ const isExpanded = shallowRef(false)
       <ul
         v-show="isExpanded"
         id="npx-packages-details"
-        class="mt-2 space-y-1 list-none m-0 p-0 pl-4"
+        class="mt-2 space-y-1 list-none m-0 p-0 ps-4"
       >
         <li
           v-for="[dep, version] in sortedNpxDeps"
@@ -94,7 +94,7 @@ const isExpanded = shallowRef(false)
               <span class="i-carbon-warning-alt w-3 h-3 block" />
             </span>
             <span
-              class="font-mono text-xs text-right truncate"
+              class="font-mono text-xs text-end truncate"
               :class="getVersionClass(outdatedNpxDeps[dep])"
               :title="
                 outdatedNpxDeps[dep]
diff --git a/app/components/PackageListControls.vue b/app/components/PackageListControls.vue
index dfc143b510..f00d8e4ebf 100644
--- a/app/components/PackageListControls.vue
+++ b/app/components/PackageListControls.vue
@@ -67,7 +67,7 @@ const showFilteredCount = computed(() => {
         type="search"
         :placeholder="placeholder ?? $t('package.list.filter_placeholder')"
         v-bind="noCorrect"
-        class="w-full bg-bg-subtle border border-border rounded-lg pl-10 pr-4 py-2 font-mono text-sm text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:(border-border-hover outline-none)"
+        class="w-full bg-bg-subtle border border-border rounded-lg ps-10 pe-4 py-2 font-mono text-sm text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:(border-border-hover outline-none)"
       />
     </div>
 
@@ -78,14 +78,14 @@ const showFilteredCount = computed(() => {
         <select
           id="package-sort"
           v-model="sortValue"
-          class="appearance-none bg-bg-subtle border border-border rounded-lg pl-3 pr-8 py-2 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 focus:(border-border-hover outline-none) hover:border-border-hover"
+          class="appearance-none bg-bg-subtle border border-border rounded-lg ps-3 pe-8 py-2 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 focus:(border-border-hover outline-none) hover:border-border-hover"
         >
           <option v-for="option in sortOptions" :key="option.value" :value="option.value">
             {{ option.label }}
           </option>
         </select>
         <div
-          class="absolute right-3 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
+          class="absolute inset-ie-3 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
           aria-hidden="true"
         >
           <div class="i-carbon-chevron-down w-4 h-4" />
diff --git a/app/components/PackagePlaygrounds.vue b/app/components/PackagePlaygrounds.vue
index 71523ebecb..5bd6d19218 100644
--- a/app/components/PackagePlaygrounds.vue
+++ b/app/components/PackagePlaygrounds.vue
@@ -166,7 +166,7 @@ function focusMenuItem(index: number) {
           v-if="isOpen && hasMultipleLinks"
           ref="menuRef"
           role="menu"
-          class="absolute top-full left-0 right-0 mt-1 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 py-1 overflow-visible"
+          class="absolute top-full inset-is-0 inset-ie-0 mt-1 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 py-1 overflow-visible"
           @keydown="handleKeydown"
         >
           <AppTooltip v-for="link in links" :key="link.url" :text="link.providerName" class="block">
diff --git a/app/components/PackageSkeleton.vue b/app/components/PackageSkeleton.vue
index 3edc3b6da4..b67220495c 100644
--- a/app/components/PackageSkeleton.vue
+++ b/app/components/PackageSkeleton.vue
@@ -110,10 +110,10 @@
       </h2>
       <!-- code-block with relative positioning for copy button -->
       <div class="relative">
-        <div class="code-block pr-16">
+        <div class="code-block pe-16">
           <span class="skeleton inline-block h-5 w-52" />
         </div>
-        <span class="skeleton absolute top-3 right-3 h-6 w-12 rounded" />
+        <span class="skeleton absolute top-3 inset-ie-3 h-6 w-12 rounded" />
       </div>
     </section>
 
diff --git a/app/components/PackageVersions.vue b/app/components/PackageVersions.vue
index 2c111134e2..ef2b7cf58e 100644
--- a/app/components/PackageVersions.vue
+++ b/app/components/PackageVersions.vue
@@ -351,7 +351,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
               v-else
               class="w-3 h-3 transition-transform duration-200"
               :class="
-                expandedTags.has(row.tag) ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right'
+                expandedTags.has(row.tag) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'
               "
               aria-hidden="true"
             />
@@ -412,7 +412,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
         <!-- Expanded versions -->
         <div
           v-if="expandedTags.has(row.tag) && getTagVersions(row.tag).length > 1"
-          class="ml-4 pl-2 border-l border-border space-y-0.5"
+          class="ms-4 ps-2 border-is border-border space-y-0.5"
         >
           <div v-for="v in getTagVersions(row.tag).slice(1)" :key="v.version" class="py-1">
             <div class="flex items-center justify-between gap-2">
@@ -470,7 +470,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
       <div class="pt-1">
         <button
           type="button"
-          class="flex items-center gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
+          class="flex items-center gap-2 text-start focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
           :aria-expanded="otherVersionsExpanded"
           :aria-label="
             otherVersionsExpanded
@@ -491,7 +491,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <span
               v-else
               class="w-3 h-3 transition-transform duration-200"
-              :class="otherVersionsExpanded ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right'"
+              :class="otherVersionsExpanded ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
               aria-hidden="true"
             />
           </span>
@@ -504,7 +504,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
         </button>
 
         <!-- Expanded other versions -->
-        <div v-if="otherVersionsExpanded" class="ml-4 pl-2 border-l border-border space-y-0.5">
+        <div v-if="otherVersionsExpanded" class="ms-4 ps-2 border-is border-border space-y-0.5">
           <!-- Hidden tag rows (overflow from visible tags) -->
           <div v-for="row in hiddenTagRows" :key="row.id" class="py-1">
             <div class="flex items-center justify-between gap-2">
@@ -568,7 +568,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       @click="toggleMajorGroup(group.groupKey)"
                     >
                       <span
-                        class="w-3 h-3 transition-transform duration-200"
+                        class="w-3 h-3 transition-transform duration-200 rtl-flip"
                         :class="
                           expandedMajorGroups.has(group.groupKey)
                             ? 'i-carbon-chevron-down'
@@ -616,7 +616,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 </div>
                 <div
                   v-if="group.versions[0]?.tags?.length"
-                  class="flex items-center gap-1 ml-5 flex-wrap"
+                  class="flex items-center gap-1 ms-5 flex-wrap"
                 >
                   <span
                     v-for="tag in group.versions[0].tags"
@@ -670,7 +670,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     />
                   </div>
                 </div>
-                <div v-if="group.versions[0]?.tags?.length" class="flex items-center gap-1 ml-5">
+                <div v-if="group.versions[0]?.tags?.length" class="flex items-center gap-1 ms-5">
                   <span
                     v-for="tag in group.versions[0].tags"
                     :key="tag"
@@ -684,7 +684,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
               <!-- Version group versions -->
               <div
                 v-if="expandedMajorGroups.has(group.groupKey) && group.versions.length > 1"
-                class="ml-6 space-y-0.5"
+                class="ms-6 space-y-0.5"
               >
                 <div v-for="v in group.versions.slice(1)" :key="v.version" class="py-1">
                   <div class="flex items-center justify-between gap-2">
diff --git a/app/components/PackageVulnerabilityTree.vue b/app/components/PackageVulnerabilityTree.vue
index e40157f042..115ad8703d 100644
--- a/app/components/PackageVulnerabilityTree.vue
+++ b/app/components/PackageVulnerabilityTree.vue
@@ -39,15 +39,15 @@ const summaryText = computed(() => {
 // Styling for each depth level - using accessible colors for both themes
 const depthStyles = {
   root: {
-    bg: 'bg-amber-500/5 border-l-2 border-l-amber-600',
+    bg: 'bg-amber-500/5 border-is-2 border-is-amber-600',
     text: 'text-fg',
   },
   direct: {
-    bg: 'bg-amber-500/5 border-l-2 border-l-amber-500',
+    bg: 'bg-amber-500/5 border-is-2 border-is-amber-500',
     text: 'text-fg-muted',
   },
   transitive: {
-    bg: 'bg-amber-500/5 border-l-2 border-l-amber-400',
+    bg: 'bg-amber-500/5 border-is-2 border-is-amber-400',
     text: 'text-fg-muted',
   },
 } as const
@@ -72,7 +72,7 @@ function getDepthStyle(depth: string | undefined) {
       <!-- Header -->
       <button
         type="button"
-        class="w-full flex items-center justify-between gap-3 px-4 py-3 text-left transition-colors duration-200 hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fg/50"
+        class="w-full flex items-center justify-between gap-3 px-4 py-3 text-start transition-colors duration-200 hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fg/50"
         :aria-expanded="isExpanded"
         aria-controls="vuln-tree-details"
         @click="isExpanded = !isExpanded"
diff --git a/app/components/PackageWeeklyDownloadStats.vue b/app/components/PackageWeeklyDownloadStats.vue
index 5afdbba0c2..e153a74a1d 100644
--- a/app/components/PackageWeeklyDownloadStats.vue
+++ b/app/components/PackageWeeklyDownloadStats.vue
@@ -186,7 +186,7 @@ const config = computed(() => {
         <button
           type="button"
           @click="showModal = true"
-          class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ml-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+          class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ms-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
           :title="$t('package.downloads.analyze')"
         >
           <span class="i-carbon-data-analytics w-4 h-4" aria-hidden="true" />
@@ -201,17 +201,17 @@ const config = computed(() => {
             <!-- Skeleton matching sparkline layout: title row + chart with data label -->
             <div class="min-h-[100px]">
               <!-- Title row: date range (24px height) -->
-              <div class="h-6 flex items-center pl-3">
+              <div class="h-6 flex items-center ps-3">
                 <span class="skeleton h-3 w-36" />
               </div>
               <!-- Chart area: data label left, sparkline right -->
               <div class="aspect-[500/80] flex items-center">
                 <!-- Data label (covers ~42% width) -->
-                <div class="w-[42%] flex items-center pl-0.5">
+                <div class="w-[42%] flex items-center ps-0.5">
                   <span class="skeleton h-7 w-24" />
                 </div>
                 <!-- Sparkline area (~58% width) -->
-                <div class="flex-1 flex items-end gap-0.5 h-4/5 pr-3">
+                <div class="flex-1 flex items-end gap-0.5 h-4/5 pe-3">
                   <span
                     v-for="i in 16"
                     :key="i"
diff --git a/app/components/ScrollToTop.vue b/app/components/ScrollToTop.vue
index a2840d3911..2dd85ac120 100644
--- a/app/components/ScrollToTop.vue
+++ b/app/components/ScrollToTop.vue
@@ -36,7 +36,7 @@ onMounted(() => {
   <button
     v-if="isActive && supportsScrollStateQueries"
     type="button"
-    class="scroll-to-top-css fixed bottom-4 right-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg md:hidden flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
+    class="scroll-to-top-css fixed bottom-4 inset-ie-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg md:hidden flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
     :aria-label="$t('common.scroll_to_top')"
     @click="scrollToTop"
   >
@@ -56,7 +56,7 @@ onMounted(() => {
     <button
       v-if="isActive && isMounted && isVisible"
       type="button"
-      class="fixed bottom-4 right-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg md:hidden flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
+      class="fixed bottom-4 inset-ie-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg md:hidden flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
       :aria-label="$t('common.scroll_to_top')"
       @click="scrollToTop"
     >
diff --git a/app/components/SearchSuggestionCard.vue b/app/components/SearchSuggestionCard.vue
index 4d00e2a299..7760b3c9c9 100644
--- a/app/components/SearchSuggestionCard.vue
+++ b/app/components/SearchSuggestionCard.vue
@@ -77,7 +77,7 @@ const emit = defineEmits<{
       </div>
 
       <span
-        class="i-carbon-arrow-right w-4 h-4 text-fg-subtle group-hover:text-fg transition-colors shrink-0"
+        class="i-carbon:arrow-right rtl-flip w-4 h-4 text-fg-subtle group-hover:text-fg transition-colors shrink-0"
         aria-hidden="true"
       />
     </NuxtLink>
diff --git a/app/components/UserCombobox.vue b/app/components/UserCombobox.vue
index 3ad727bd06..0ca88a539a 100644
--- a/app/components/UserCombobox.vue
+++ b/app/components/UserCombobox.vue
@@ -205,7 +205,7 @@ const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
           aria-live="polite"
         >
           <span
-            class="i-carbon-information w-3 h-3 inline-block mr-1 align-middle"
+            class="i-carbon-information w-3 h-3 inline-block me-1 align-middle"
             aria-hidden="true"
           />
           {{
diff --git a/app/components/VersionSelector.vue b/app/components/VersionSelector.vue
index c8f67e3db5..5aa1404a49 100644
--- a/app/components/VersionSelector.vue
+++ b/app/components/VersionSelector.vue
@@ -507,7 +507,7 @@ watch(
         :aria-activedescendant="
           focusedIndex >= 0 ? `version-${flatItems[focusedIndex]?.version?.version}` : undefined
         "
-        class="absolute top-full left-0 mt-2 min-w-[220px] bg-bg-elevated border border-border rounded-lg shadow-lg z-50 py-1 max-h-[400px] overflow-y-auto overscroll-contain focus-visible:outline-none"
+        class="absolute top-full inset-is-0 mt-2 min-w-[220px] bg-bg-elevated border border-border rounded-lg shadow-lg z-50 py-1 max-h-[400px] overflow-y-auto overscroll-contain focus-visible:outline-none"
         @keydown="handleListboxKeydown"
       >
         <!-- Version groups -->
@@ -546,8 +546,8 @@ watch(
               />
               <span
                 v-else
-                class="w-3 h-3 transition-transform duration-200"
-                :class="group.isExpanded ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right'"
+                class="w-3 h-3 transition-transform duration-200 rtl-flip"
+                :class="group.isExpanded ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
                 aria-hidden="true"
               />
             </button>
@@ -582,7 +582,7 @@ watch(
           <!-- Expanded versions -->
           <div
             v-if="group.isExpanded && group.versions.length > 1"
-            class="ml-6 border-l border-border"
+            class="ms-6 border-is border-border"
           >
             <template v-for="(v, vIndex) in group.versions.slice(1)" :key="v.version">
               <NuxtLink
@@ -595,7 +595,7 @@ watch(
                   flatItems[focusedIndex]?.type === 'version' &&
                   flatItems[focusedIndex]?.version?.version === v.version
                 "
-                class="flex items-center justify-between gap-2 pl-4 pr-3 py-1.5 text-xs font-mono hover:bg-bg-muted transition-[color,background-color] focus-visible:outline-none"
+                class="flex items-center justify-between gap-2 ps-4 pe-3 py-1.5 text-xs font-mono hover:bg-bg-muted transition-[color,background-color] focus-visible:outline-none"
                 :class="[
                   v.isCurrent ? 'text-fg bg-bg-muted' : 'text-fg-subtle',
                   flatItems[focusedIndex]?.version?.version === v.version ? 'bg-bg-muted' : '',
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index ff18b9533b..aa078c8dd6 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -467,7 +467,7 @@ defineOgImageComponent('Package', {
               <!-- Version resolution indicator (e.g., "latest → 4.2.0") -->
               <template v-if="resolvedVersion !== requestedVersion">
                 <span class="font-mono text-fg-muted text-sm">{{ requestedVersion }}</span>
-                <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
+                <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
               </template>
 
               <NuxtLink
@@ -508,10 +508,10 @@ defineOgImageComponent('Package', {
                 v-if="displayVersion"
                 :package-name="pkg.name"
                 :version="displayVersion.version"
-                class="self-baseline ml-1 sm:ml-2"
+                class="self-baseline ms-1 sm:ms-2"
               />
               <template #fallback>
-                <ul class="flex items-center gap-1.5 self-baseline ml-1 sm:ml-2">
+                <ul class="flex items-center gap-1.5 self-baseline ms-1 sm:ms-2">
                   <li class="skeleton w-8 h-5 rounded" />
                   <li class="skeleton w-12 h-5 rounded" />
                 </ul>
@@ -522,7 +522,7 @@ defineOgImageComponent('Package', {
             <nav
               v-if="displayVersion"
               :aria-label="$t('package.navigation')"
-              class="hidden sm:flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0 ml-auto self-center"
+              class="hidden sm:flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0 ms-auto self-center"
             >
               <NuxtLink
                 v-if="docsLink"
@@ -574,7 +574,7 @@ defineOgImageComponent('Package', {
             <!-- Fade overlay with show more button - only when collapsed and overflowing -->
             <div
               v-if="pkg.description && descriptionOverflows && !descriptionExpanded"
-              class="absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-bg via-bg/90 to-transparent flex items-end justify-end"
+              class="absolute bottom-0 inset-is-0 inset-ie-0 h-10 bg-gradient-to-t from-bg via-bg/90 to-transparent flex items-end justify-end"
             >
               <button
                 type="button"
@@ -989,7 +989,7 @@ defineOgImageComponent('Package', {
                   class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
                   :title="$t('package.get_started.view_types', { package: typesPackageName })"
                 >
-                  <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
+                  <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
                   <span class="sr-only">View {{ typesPackageName }}</span>
                 </NuxtLink>
               </div>
@@ -1073,7 +1073,7 @@ defineOgImageComponent('Package', {
                     class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
                     :title="`View ${createPackageInfo.packageName}`"
                   >
-                    <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
+                    <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
                     <span class="sr-only">View {{ createPackageInfo.packageName }}</span>
                   </NuxtLink>
                 </div>
@@ -1203,19 +1203,13 @@ defineOgImageComponent('Package', {
             <dl class="space-y-2">
               <div v-if="displayVersion.engines.node" class="flex justify-between gap-4 py-1">
                 <dt class="text-fg-muted text-sm shrink-0">node</dt>
-                <dd
-                  class="font-mono text-sm text-fg text-right"
-                  :title="displayVersion.engines.node"
-                >
+                <dd class="font-mono text-sm text-fg text-end" :title="displayVersion.engines.node">
                   {{ displayVersion.engines.node }}
                 </dd>
               </div>
               <div v-if="displayVersion.engines.npm" class="flex justify-between gap-4 py-1">
                 <dt class="text-fg-muted text-sm shrink-0">npm</dt>
-                <dd
-                  class="font-mono text-sm text-fg text-right"
-                  :title="displayVersion.engines.npm"
-                >
+                <dd class="font-mono text-sm text-fg text-end" :title="displayVersion.engines.npm">
                   {{ displayVersion.engines.npm }}
                 </dd>
               </div>
diff --git a/app/pages/about.vue b/app/pages/about.vue
index 776f219d6b..3f6e565e6a 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -225,7 +225,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
                 class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
               >
                 {{ $t('about.get_involved.contribute.cta') }}
-                <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
+                <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
               </span>
             </a>
 
@@ -249,7 +249,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
                 class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
               >
                 {{ $t('about.get_involved.community.cta') }}
-                <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
+                <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
               </span>
             </a>
 
@@ -271,7 +271,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
                 class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
               >
                 {{ $t('about.get_involved.follow.cta') }}
-                <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
+                <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
               </span>
             </a>
           </div>
@@ -283,7 +283,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
           to="/"
           class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-[color] duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
         >
-          <span class="i-carbon-arrow-left w-4 h-4" aria-hidden="true" />
+          <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
           {{ $t('about.back_home') }}
         </NuxtLink>
       </footer>
diff --git a/app/pages/code/[...path].vue b/app/pages/code/[...path].vue
index 86809c03d4..a78c938d3a 100644
--- a/app/pages/code/[...path].vue
+++ b/app/pages/code/[...path].vue
@@ -343,7 +343,7 @@ useSeoMeta({
     <div v-else-if="fileTree" class="flex flex-1">
       <!-- File tree sidebar - sticky with internal scroll -->
       <aside
-        class="w-64 lg:w-72 border-r border-border shrink-0 hidden md:block bg-bg-subtle sticky top-28 self-start h-[calc(100vh-7rem)] overflow-y-auto"
+        class="w-64 lg:w-72 border-ie border-border shrink-0 hidden md:block bg-bg-subtle sticky top-28 self-start h-[calc(100vh-7rem)] overflow-y-auto"
       >
         <CodeFileTree
           :tree="fileTree.tree"
@@ -423,7 +423,7 @@ useSeoMeta({
           :aria-label="$t('common.loading')"
         >
           <!-- Fake line numbers column -->
-          <div class="shrink-0 bg-bg-subtle border-r border-border w-14 py-0">
+          <div class="shrink-0 bg-bg-subtle border-ie border-border w-14 py-0">
             <div v-for="n in 20" :key="n" class="px-3 h-6 flex items-center justify-end">
               <span class="skeleton w-4 h-3 rounded-sm" />
             </div>
diff --git a/app/pages/docs/[...path].vue b/app/pages/docs/[...path].vue
index 3cdcd3d47d..1f15a76ec4 100644
--- a/app/pages/docs/[...path].vue
+++ b/app/pages/docs/[...path].vue
@@ -134,7 +134,7 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
       <!-- Sidebar TOC -->
       <aside
         v-if="docsData?.toc && !showEmptyState"
-        class="hidden lg:block w-64 xl:w-72 shrink-0 border-r border-border"
+        class="hidden lg:block w-64 xl:w-72 shrink-0 border-ie border-border"
       >
         <div class="docs-sidebar sticky overflow-y-auto p-4">
           <h2 class="text-xs font-semibold text-fg-subtle uppercase tracking-wider mb-4">
@@ -210,7 +210,7 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
 }
 
 .toc-content > ul > li > ul {
-  @apply mt-2 pl-3 border-l border-border/50;
+  @apply mt-2 ps-3 border-is border-border/50;
 }
 
 .toc-content > ul > li > ul a {
@@ -334,7 +334,7 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
  *    These are illustrative/casual and shouldn't compete with the signature.
  */
 .docs-content .docs-description .shiki {
-  @apply text-sm pl-4 py-3 my-4 border-l-2 border-border;
+  @apply text-sm ps-4 py-3 my-4 border-is-2 border-border;
   white-space: pre-wrap;
   word-break: break-word;
 }
@@ -384,7 +384,7 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
 }
 
 .docs-content dd {
-  @apply text-sm text-fg-subtle ml-4 mb-3;
+  @apply text-sm text-fg-subtle ms-4 mb-3;
 }
 
 /* Returns paragraph */
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 5c07d9ac19..c985c70693 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -68,7 +68,7 @@ defineOgImageComponent('Default')
 
             <div class="search-box relative flex items-center">
               <span
-                class="absolute left-4 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 group-focus-within:text-accent z-1"
+                class="absolute inset-is-4 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 group-focus-within:text-accent z-1"
               >
                 /
               </span>
@@ -82,13 +82,13 @@ defineOgImageComponent('Default')
                 :placeholder="$t('search.placeholder')"
                 v-bind="noCorrect"
                 autofocus
-                class="w-full bg-bg-subtle border border-border rounded-lg pl-8 pr-24 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-border-color duration-300 focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+                class="w-full bg-bg-subtle border border-border rounded-lg ps-8 pe-24 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-border-color duration-300 focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
                 @input="handleSearch"
               />
 
               <button
                 type="submit"
-                class="absolute right-2 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-[background-color,transform] duration-200 hover:bg-fg/90 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+                class="absolute inset-ie-2 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-[background-color,transform] duration-200 hover:bg-fg/90 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
               >
                 {{ $t('search.button') }}
               </button>
diff --git a/app/pages/search.vue b/app/pages/search.vue
index 47b4ee9a15..10c36c9785 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -731,7 +731,7 @@ defineOgImageComponent('Default', {
 
               <div class="search-box relative flex items-center">
                 <span
-                  class="absolute left-4 text-fg-subtle font-mono text-base pointer-events-none transition-colors duration-200 group-focus-within:text-accent"
+                  class="absolute inset-is-4 text-fg-subtle font-mono text-base pointer-events-none transition-colors duration-200 group-focus-within:text-accent"
                   aria-hidden="true"
                 >
                   /
@@ -745,13 +745,13 @@ defineOgImageComponent('Default', {
                   :placeholder="$t('search.placeholder')"
                   v-bind="noCorrect"
                   autofocus
-                  class="w-full max-w-full bg-bg-subtle border border-border rounded-lg pl-8 pr-10 py-3 font-mono text-base text-fg placeholder:text-fg-subtle transition-colors duration-300 focus:border-accent focus-visible:outline-none appearance-none"
+                  class="w-full max-w-full bg-bg-subtle border border-border rounded-lg ps-8 pe-10 py-3 font-mono text-base text-fg placeholder:text-fg-subtle transition-colors duration-300 focus:border-accent focus-visible:outline-none appearance-none"
                   @keydown="handleResultsKeydown"
                 />
                 <button
                   v-show="inputValue"
                   type="button"
-                  class="absolute right-3 p-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+                  class="absolute inset-ie-3 p-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
                   :aria-label="$t('search.clear')"
                   @click="inputValue = ''"
                 >
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index 1d0556a687..7562ec858a 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -42,7 +42,7 @@ defineOgImageComponent('Default', {
             class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 shrink-0"
             @click="router.back()"
           >
-            <span class="i-carbon-arrow-left w-4 h-4" aria-hidden="true" />
+            <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
             <span class="hidden sm:inline">{{ $t('nav.back') }}</span>
           </button>
         </div>
@@ -101,14 +101,15 @@ defineOgImageComponent('Default', {
             <div class="space-y-2">
               <button
                 type="button"
-                class="w-full flex items-center justify-between gap-4 group"
+                class="w-full flex items-center justify-start gap-4 group"
                 role="switch"
                 :aria-checked="settings.relativeDates"
                 @click="settings.relativeDates = !settings.relativeDates"
               >
-                <span class="text-sm text-fg font-medium text-left">
+                <span class="text-sm text-fg font-medium text-end">
                   {{ $t('settings.relative_dates') }}
                 </span>
+                <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
                 <span
                   class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out motion-reduce:transition-none shadow-sm cursor-pointer"
                   :class="settings.relativeDates ? 'bg-accent' : 'bg-bg border border-border'"
@@ -116,9 +117,7 @@ defineOgImageComponent('Default', {
                 >
                   <span
                     class="pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
-                    :class="
-                      settings.relativeDates ? 'translate-x-5 bg-bg' : 'translate-x-0 bg-fg-muted'
-                    "
+                    :class="settings.relativeDates ? 'bg-bg' : 'bg-fg-muted'"
                   />
                 </span>
               </button>
@@ -134,14 +133,15 @@ defineOgImageComponent('Default', {
             <div class="space-y-2">
               <button
                 type="button"
-                class="w-full flex items-center justify-between gap-4 group"
+                class="w-full flex items-center justify-start gap-4 group"
                 role="switch"
                 :aria-checked="settings.includeTypesInInstall"
                 @click="settings.includeTypesInInstall = !settings.includeTypesInInstall"
               >
-                <span class="text-sm text-fg font-medium text-left">
+                <span class="text-sm text-fg font-medium text-start">
                   {{ $t('settings.include_types') }}
                 </span>
+                <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
                 <span
                   class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out motion-reduce:transition-none shadow-sm cursor-pointer"
                   :class="
@@ -151,11 +151,7 @@ defineOgImageComponent('Default', {
                 >
                   <span
                     class="pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
-                    :class="
-                      settings.includeTypesInInstall
-                        ? 'translate-x-5 bg-bg'
-                        : 'translate-x-0 bg-fg-muted'
-                    "
+                    :class="settings.includeTypesInInstall ? 'bg-bg' : 'bg-fg-muted'"
                   />
                 </span>
               </button>
@@ -171,14 +167,15 @@ defineOgImageComponent('Default', {
             <div class="space-y-2">
               <button
                 type="button"
-                class="w-full flex items-center justify-between gap-4 group"
+                class="w-full flex items-center justify-start gap-4 group"
                 role="switch"
                 :aria-checked="settings.hidePlatformPackages"
                 @click="settings.hidePlatformPackages = !settings.hidePlatformPackages"
               >
-                <span class="text-sm text-fg font-medium text-left">
+                <span class="text-sm text-fg font-medium text-start">
                   {{ $t('settings.hide_platform_packages') }}
                 </span>
+                <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
                 <span
                   class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out motion-reduce:transition-none shadow-sm cursor-pointer"
                   :class="
@@ -188,11 +185,7 @@ defineOgImageComponent('Default', {
                 >
                   <span
                     class="pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
-                    :class="
-                      settings.hidePlatformPackages
-                        ? 'translate-x-5 bg-bg'
-                        : 'translate-x-0 bg-fg-muted'
-                    "
+                    :class="settings.hidePlatformPackages ? 'bg-bg' : 'bg-fg-muted'"
                   />
                 </span>
               </button>
@@ -251,3 +244,15 @@ defineOgImageComponent('Default', {
     </article>
   </main>
 </template>
+
+<style scoped>
+button[aria-checked='false'] > span:last-of-type > span {
+  translate: 0;
+}
+button[aria-checked='true'] > span:last-of-type > span {
+  translate: calc(100%);
+}
+html[dir='rtl'] button[aria-checked='true'] > span:last-of-type > span {
+  translate: calc(-100%);
+}
+</style>
diff --git a/app/pages/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
index b465804c6f..94aa23b45d 100644
--- a/app/pages/~[username]/orgs.vue
+++ b/app/pages/~[username]/orgs.vue
@@ -129,7 +129,7 @@ useSeoMeta({
           :to="`/~${username}`"
           class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
         >
-          <span class="i-carbon-arrow-left w-4 h-4" aria-hidden="true" />
+          <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
           {{ $t('user.orgs_page.back_to_profile') }}
         </NuxtLink>
       </nav>