style: replace physical RTL classes with logical ones

CONTRIBUTING.md

@@ -232,7 +232,7 @@ We've added some `UnoCSS` utilities styles to help you with that:
 - Do not use `rtl-` classes, such as `rtl-left-0`.
 - For icons that should be rotated for RTL, add `class="rtl-flip"`. This can only be used for icons outside of elements with `dir="auto"`.
 - For absolute positioned elements, don't use `left/right`: for example `left-0`. Use `inset-inline-start/end` instead. `UnoCSS` shortcuts are `inset-is` for `inset-inline-start` and `inset-ie` for `inset-inline-end`. Example: `left-0` should be replaced with `inset-is-0`.
-- If you need to change the border radius for an entire left or right side, use `border-inline-start/end`. `UnoCSS` shortcuts are `rounded-is` for left side, `rounded-ie` for right side. Example: `rounded-l-5` should be replaced with `rounded-ie-5`.
+- If you need to change the border radius for an entire left or right side, use `border-inline-start/end`. `UnoCSS` shortcuts are `rounded-is` for left side, `rounded-ie` for right side. Example: `rounded-l-5` should be replaced with `rounded-is-5`.
 - If you need to change the border radius for one corner, use `border-start-end-radius` and similar rules. `UnoCSS` shortcuts are `rounded` + top/bottom as either `-bs` (top) or `-be` (bottom) + left/right as either `-is` (left) or `-ie` (right). Example: `rounded-tl-0` should be replaced with `rounded-bs-is-0`.
 
 ## Localization (i18n)

app/assets/main.css

@@ -156,7 +156,7 @@ button {
 .skip-link {
   position: fixed;
   top: -100%;
-  left: 0;
+  inset-inline-start: 0;
   padding: 0.5rem 1rem;
   background: var(--fg);
   color: var(--bg);
@@ -165,11 +165,6 @@ button {
   transition: top 0.2s ease;
 }
 
-html[dir='rtl'] .skip-link {
-  left: unset;
-  right: 0;
-}
-
 .skip-link:hover {
   color: var(--bg);
   text-decoration: underline;
@@ -298,7 +293,7 @@ html.light .shiki span {
 .readme-content ul,
 .readme-content ol {
   margin: 1rem 0;
-  padding-left: 1.5rem;
+  padding-inline-start: 1.5rem;
 }
 
 .readme-content ul {
@@ -319,17 +314,18 @@ html.light .shiki span {
 }
 
 .readme-content blockquote {
-  border-left: 2px solid var(--border);
-  padding-left: 1rem;
+  border-inline-start: 2px solid var(--border);
+  padding-inline-start: 1rem;
   margin: 1.5rem 0;
   color: var(--fg-subtle);
   font-style: italic;
 }
 
 /* GitHub-style callouts/alerts */
 .readme-content blockquote[data-callout] {
-  border-left-width: 3px;
-  padding: 1rem 1rem 1rem 1.25rem;
+  border-inline-start-width: 3px;
+  padding: 1rem;
+  padding-inline-start: 1.25rem;
   background: var(--bg-subtle);
   font-style: normal;
   color: var(--fg-subtle);
@@ -344,7 +340,7 @@ html.light .shiki span {
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin-bottom: 0.5rem;
-  padding-left: 1.5rem;
+  padding-inline-start: 1.5rem;
 }
 
 .readme-content blockquote[data-callout]::after {
@@ -365,7 +361,7 @@ html.light .shiki span {
 
 /* Note - blue */
 .readme-content blockquote[data-callout='note'] {
-  border-left-color: var(--syntax-str);
+  border-inline-start-color: var(--syntax-str);
   background: rgba(59, 130, 246, 0.05);
 }
 .readme-content blockquote[data-callout='note']::before {
@@ -380,7 +376,7 @@ html.light .shiki span {
 
 /* Tip - green */
 .readme-content blockquote[data-callout='tip'] {
-  border-left-color: #22c55e;
+  border-inline-start-color: #22c55e;
   background: rgba(34, 197, 94, 0.05);
 }
 .readme-content blockquote[data-callout='tip']::before {
@@ -395,7 +391,7 @@ html.light .shiki span {
 
 /* Important - purple */
 .readme-content blockquote[data-callout='important'] {
-  border-left-color: var(--syntax-fn);
+  border-inline-start-color: var(--syntax-fn);
   background: rgba(168, 85, 247, 0.05);
 }
 .readme-content blockquote[data-callout='important']::before {
@@ -410,7 +406,7 @@ html.light .shiki span {
 
 /* Warning - yellow/orange */
 .readme-content blockquote[data-callout='warning'] {
-  border-left-color: #eab308;
+  border-inline-start-color: #eab308;
   background: rgba(234, 179, 8, 0.05);
 }
 .readme-content blockquote[data-callout='warning']::before {
@@ -425,7 +421,7 @@ html.light .shiki span {
 
 /* Caution - red */
 .readme-content blockquote[data-callout='caution'] {
-  border-left-color: #ef4444;
+  border-inline-start-color: #ef4444;
   background: rgba(239, 68, 68, 0.05);
 }
 .readme-content blockquote[data-callout='caution']::before {
@@ -452,7 +448,7 @@ html.light .shiki span {
 .readme-content td {
   border: 1px solid var(--border);
   padding: 0.75rem 1rem;
-  text-align: left;
+  text-align: start;
 }
 
 .readme-content th {

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 mt-1',
+  left: 'inset-ie-full top-1/2 -translate-y-1/2 me-2',
+  right: 'inset-is-full top-1/2 -translate-y-1/2 ms-2',
 }
 
 const tooltipPosition = computed(() => positionClasses[props.position || 'bottom'])

app/components/ColumnPicker.vue

@@ -93,7 +93,7 @@ function handleReset() {
         v-if="isOpen"
         ref="menuRef"
         :id="menuId"
-        class="absolute right-0 mt-2 w-60 bg-bg-subtle border border-border rounded-lg shadow-lg z-20"
+        class="absolute inset-ie-0 mt-2 w-60 bg-bg-subtle border border-border rounded-lg shadow-lg z-20"
         role="group"
         :aria-label="$t('filters.columns.show')"
       >
@@ -144,7 +144,7 @@ function handleReset() {
           <div class="border-t border-border py-1">
             <button
               type="button"
-              class="w-full px-3 py-2 text-left text-sm font-mono text-fg-muted hover:bg-bg-muted hover:text-fg transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset"
+              class="w-full px-3 py-2 text-start text-sm font-mono text-fg-muted hover:bg-bg-muted hover:text-fg transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset"
               @click="handleReset"
             >
               {{ $t('filters.columns.reset') }}

app/components/FilterChips.vue

@@ -21,7 +21,7 @@ const emit = defineEmits<{
         }}</span>
         <button
           type="button"
-          class="ml-0.5 hover:text-fg rounded-full p-0.5 transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+          class="ms-0.5 hover:text-fg rounded-full p-0.5 transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
           :aria-label="$t('filters.remove_filter', { label: chip.label })"
           @click="emit('remove', chip)"
         >

app/components/FilterPanel.vue

@@ -171,7 +171,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
     <!-- Collapsed header -->
     <button
       type="button"
-      class="w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset"
+      class="w-full flex items-center gap-3 px-4 py-3 text-start hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset"
       :aria-expanded="isExpanded"
       @click="isExpanded = !isExpanded"
     >
@@ -183,7 +183,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
         {{ filterSummary }}
       </span>
       <span
-        class="i-carbon-chevron-down w-4 h-4 text-fg-subtle transition-transform duration-200 shrink-0 ml-auto"
+        class="i-carbon-chevron-down w-4 h-4 text-fg-subtle transition-transform duration-200 shrink-0 ms-auto"
         :class="{ 'rotate-180': isExpanded }"
         aria-hidden="true"
       />

app/components/OrgTeamsPanel.vue

@@ -406,7 +406,7 @@ watch(lastExecutionTime, () => {
         <div
           v-if="expandedTeams.has(teamName)"
           :id="`team-${teamName}-members`"
-          class="pl-9 pr-3 pb-3"
+          class="ps-9 pe-3 pb-3"
         >
           <!-- Members list -->
           <ul
@@ -417,7 +417,7 @@ watch(lastExecutionTime, () => {
             <li
               v-for="user in teamUsers[teamName]"
               :key="user"
-              class="flex items-center justify-start py-1 pl-2 pr-1 rounded hover:bg-bg-subtle transition-colors duration-200"
+              class="flex items-center justify-start py-1 ps-2 pe-1 rounded hover:bg-bg-subtle transition-colors duration-200"
             >
               <NuxtLink
                 :to="{ name: '~username', params: { username: user } }"
@@ -497,7 +497,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>
@@ -509,7 +509,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

app/components/PackageDeprecatedTree.vue

@@ -24,15 +24,15 @@ const bannerColor = 'border-purple-600/40 bg-purple-500/10 text-purple-700 dark:
 // Styling for each depth level
 const depthStyles = {
   root: {
-    bg: 'bg-purple-500/5 border-l-2 border-l-purple-600',
+    bg: 'bg-purple-500/5 border-is-2 border-is-purple-600',
     text: 'text-fg',
   },
   direct: {
-    bg: 'bg-purple-500/5 border-l-2 border-l-purple-500',
+    bg: 'bg-purple-500/5 border-is-2 border-is-purple-500',
     text: 'text-fg-muted',
   },
   transitive: {
-    bg: 'bg-purple-500/5 border-l-2 border-l-purple-400',
+    bg: 'bg-purple-500/5 border-is-2 border-is-purple-400',
     text: 'text-fg-muted',
   },
 } as const
@@ -48,7 +48,7 @@ function getDepthStyle(depth: DependencyDepth) {
       <!-- 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="deprecated-tree-details"
         @click="isExpanded = !isExpanded"

app/components/PackageListToolbar.vue

@@ -159,7 +159,7 @@ function getSortKeyLabelKey(key: SortKey): string {
             <select
               id="sort-select"
               :value="currentSort.key"
-              class="appearance-none bg-bg-subtle border border-border rounded-md pl-3 pr-8 py-1.5 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 hover:border-border-hover focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none"
+              class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1.5 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 hover:border-border-hover focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none"
               @change="handleSortKeyChange"
             >
               <option
@@ -173,7 +173,7 @@ function getSortKeyLabelKey(key: SortKey): string {
               </option>
             </select>
             <div
-              class="absolute right-2 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
+              class="absolute inset-ie-2 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
               aria-hidden="true"
             >
               <span class="i-carbon-chevron-down w-4 h-4" />

app/components/PackageReplacement.vue

@@ -51,7 +51,7 @@ const docPath = computed(() => {
         :href="mdnUrl"
         target="_blank"
         rel="noopener noreferrer"
-        class="inline-flex items-center gap-1 ml-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
+        class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
       >
         {{ $t('package.replacement.mdn') }}
         <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
@@ -61,7 +61,7 @@ const docPath = computed(() => {
         :href="docPath"
         target="_blank"
         rel="noopener noreferrer"
-        class="inline-flex items-center gap-1 ml-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
+        class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
       >
         {{ $t('package.replacement.learn_more') }}
         <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />

app/components/PackageTable.vue

@@ -104,7 +104,7 @@ function getColumnLabelKey(id: ColumnId): string {
 
 <template>
   <div class="overflow-x-auto">
-    <table class="w-full text-left">
+    <table class="w-full text-start">
       <thead class="border-b border-border">
         <tr>
           <!-- Name (always visible) -->
@@ -160,7 +160,7 @@ function getColumnLabelKey(id: ColumnId): string {
           <th
             v-if="isColumnVisible('downloads')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-right focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
+            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-end focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
             :class="{
               'cursor-pointer hover:text-fg transition-colors duration-200':
                 isSortable('downloads'),
@@ -245,31 +245,31 @@ function getColumnLabelKey(id: ColumnId): string {
           <th
             v-if="isColumnVisible('qualityScore')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-right"
+            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-end"
           >
             {{ $t(getColumnLabelKey('qualityScore')) }}
           </th>
 
           <th
             v-if="isColumnVisible('popularityScore')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-right"
+            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-end"
           >
             {{ $t(getColumnLabelKey('popularityScore')) }}
           </th>
 
           <th
             v-if="isColumnVisible('maintenanceScore')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-right"
+            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-end"
           >
             {{ $t(getColumnLabelKey('maintenanceScore')) }}
           </th>
 
           <th
             v-if="isColumnVisible('combinedScore')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-right"
+            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-end"
           >
             {{ $t(getColumnLabelKey('combinedScore')) }}
           </th>
@@ -296,8 +296,8 @@ function getColumnLabelKey(id: ColumnId): string {
             <td v-if="isColumnVisible('description')" class="py-3 px-3">
               <div class="h-4 w-48 bg-bg-muted rounded animate-pulse" />
             </td>
-            <td v-if="isColumnVisible('downloads')" class="py-3 px-3 text-right">
-              <div class="h-4 w-16 bg-bg-muted rounded animate-pulse ml-auto" />
+            <td v-if="isColumnVisible('downloads')" class="py-3 px-3 text-end">
+              <div class="h-4 w-16 bg-bg-muted rounded animate-pulse ms-auto" />
             </td>
             <td v-if="isColumnVisible('updated')" class="py-3 px-3">
               <div class="h-4 w-20 bg-bg-muted rounded animate-pulse" />

app/components/PackageTableRow.vue

@@ -77,7 +77,7 @@ const allMaintainersText = computed(() => {
     <!-- Downloads -->
     <td
       v-if="isColumnVisible('downloads')"
-      class="py-2 px-3 font-mono text-xs text-fg-muted text-right tabular-nums"
+      class="py-2 px-3 font-mono text-xs text-fg-muted text-end tabular-nums"
     >
       {{ formatDownloads(result.downloads?.weekly) }}
     </td>
@@ -142,31 +142,31 @@ const allMaintainersText = computed(() => {
     <!-- Quality Score -->
     <td
       v-if="isColumnVisible('qualityScore')"
-      class="py-2 px-3 font-mono text-xs text-fg-muted text-right tabular-nums"
+      class="py-2 px-3 font-mono text-xs text-fg-muted text-end tabular-nums"
     >
       {{ formatScore(score?.detail?.quality) }}
     </td>
 
     <!-- Popularity Score -->
     <td
       v-if="isColumnVisible('popularityScore')"
-      class="py-2 px-3 font-mono text-xs text-fg-muted text-right tabular-nums"
+      class="py-2 px-3 font-mono text-xs text-fg-muted text-end tabular-nums"
     >
       {{ formatScore(score?.detail?.popularity) }}
     </td>
 
     <!-- Maintenance Score -->
     <td
       v-if="isColumnVisible('maintenanceScore')"
-      class="py-2 px-3 font-mono text-xs text-fg-muted text-right tabular-nums"
+      class="py-2 px-3 font-mono text-xs text-fg-muted text-end tabular-nums"
     >
       {{ formatScore(score?.detail?.maintenance) }}
     </td>
 
     <!-- Combined Score -->
     <td
       v-if="isColumnVisible('combinedScore')"
-      class="py-2 px-3 font-mono text-xs text-fg-muted text-right tabular-nums"
+      class="py-2 px-3 font-mono text-xs text-fg-muted text-end tabular-nums"
     >
       {{ formatScore(score?.final) }}
     </td>