From d533302c08f130cb45629164b310f6da47873d3e Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <id@shuuji3.xyz>
Date: Fri, 30 Jan 2026 18:47:52 +0900
Subject: [PATCH 1/2] style: replace physical RTL classes with logical ones

---
 app/assets/main.css                      | 32 +++++++++++-------------
 app/components/AppTooltip.vue            |  8 +++---
 app/components/ColumnPicker.vue          |  4 +--
 app/components/FilterChips.vue           |  2 +-
 app/components/FilterPanel.vue           |  4 +--
 app/components/OrgTeamsPanel.vue         |  8 +++---
 app/components/PackageDeprecatedTree.vue |  8 +++---
 app/components/PackageListToolbar.vue    |  4 +--
 app/components/PackageReplacement.vue    |  4 +--
 app/components/PackageTable.vue          | 16 ++++++------
 app/components/PackageTableRow.vue       | 10 ++++----
 app/components/PaginationControls.vue    |  4 +--
 app/pages/[...package].vue               | 12 +++------
 server/utils/docs/render.ts              |  2 +-
 14 files changed, 54 insertions(+), 64 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index eaccb18ff3..efeea3805a 100644
--- a/app/assets/main.css
+++ b/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,8 +314,8 @@ 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;
@@ -328,8 +323,9 @@ html.light .shiki span {
 
 /* 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 {
diff --git a/app/components/AppTooltip.vue b/app/components/AppTooltip.vue
index 575149d50a..d430cae683 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 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'])
diff --git a/app/components/ColumnPicker.vue b/app/components/ColumnPicker.vue
index 553873ebf8..879208b818 100644
--- a/app/components/ColumnPicker.vue
+++ b/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') }}
diff --git a/app/components/FilterChips.vue b/app/components/FilterChips.vue
index ff1383038e..6136387552 100644
--- a/app/components/FilterChips.vue
+++ b/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)"
         >
diff --git a/app/components/FilterPanel.vue b/app/components/FilterPanel.vue
index 8b28571252..0b5c585962 100644
--- a/app/components/FilterPanel.vue
+++ b/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"
       />
diff --git a/app/components/OrgTeamsPanel.vue b/app/components/OrgTeamsPanel.vue
index 156a156f5f..9ee10e7d1f 100644
--- a/app/components/OrgTeamsPanel.vue
+++ b/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
diff --git a/app/components/PackageDeprecatedTree.vue b/app/components/PackageDeprecatedTree.vue
index a23b900e93..847cb0114c 100644
--- a/app/components/PackageDeprecatedTree.vue
+++ b/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"
diff --git a/app/components/PackageListToolbar.vue b/app/components/PackageListToolbar.vue
index b02485370c..adbeb5268a 100644
--- a/app/components/PackageListToolbar.vue
+++ b/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" />
diff --git a/app/components/PackageReplacement.vue b/app/components/PackageReplacement.vue
index 4d0af63823..58734df311 100644
--- a/app/components/PackageReplacement.vue
+++ b/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" />
diff --git a/app/components/PackageTable.vue b/app/components/PackageTable.vue
index 6b62d49af7..a4488d9a72 100644
--- a/app/components/PackageTable.vue
+++ b/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,7 +245,7 @@ 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>
@@ -253,7 +253,7 @@ function getColumnLabelKey(id: ColumnId): string {
           <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>
@@ -261,7 +261,7 @@ function getColumnLabelKey(id: ColumnId): string {
           <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>
@@ -269,7 +269,7 @@ function getColumnLabelKey(id: ColumnId): string {
           <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" />
diff --git a/app/components/PackageTableRow.vue b/app/components/PackageTableRow.vue
index dbe88501a2..f6b75d7d43 100644
--- a/app/components/PackageTableRow.vue
+++ b/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,7 +142,7 @@ 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>
@@ -150,7 +150,7 @@ const allMaintainersText = computed(() => {
     <!-- 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>
@@ -158,7 +158,7 @@ const allMaintainersText = computed(() => {
     <!-- 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>
@@ -166,7 +166,7 @@ const allMaintainersText = computed(() => {
     <!-- 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>
diff --git a/app/components/PaginationControls.vue b/app/components/PaginationControls.vue
index 1e0654bf8e..34419d16ee 100644
--- a/app/components/PaginationControls.vue
+++ b/app/components/PaginationControls.vue
@@ -154,7 +154,7 @@ function handlePageSizeChange(event: Event) {
         <select
           id="page-size"
           :value="pageSize"
-          class="appearance-none bg-bg-subtle border border-border rounded-md pl-3 pr-8 py-1 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 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="handlePageSizeChange"
         >
           <option v-for="size in PAGE_SIZE_OPTIONS" :key="size" :value="size">
@@ -166,7 +166,7 @@ function handlePageSizeChange(event: Event) {
           </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-3 h-3" />
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index be2f2a16c4..af54cb8789 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -530,7 +530,7 @@ function handleClick(event: MouseEvent) {
             <!-- Fade overlay with show more button - only when collapsed and overflowing -->
             <div
               v-if="pkg.description && descriptionOverflows && !descriptionExpanded"
-              class="absolute bottom-0 inside-is-0 inside-ie-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"
@@ -1002,19 +1002,13 @@ function handleClick(event: MouseEvent) {
             <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/server/utils/docs/render.ts b/server/utils/docs/render.ts
index 12fde4cce3..83f813d563 100644
--- a/server/utils/docs/render.ts
+++ b/server/utils/docs/render.ts
@@ -405,7 +405,7 @@ export function renderToc(symbols: MergedSymbol[]): string {
     )
 
     const showSymbols = kindSymbols.slice(0, MAX_TOC_ITEMS_PER_KIND)
-    lines.push(`<ul class="pl-3 space-y-0.5 border-l border-border/50">`)
+    lines.push(`<ul class="ps-3 space-y-0.5 border-is border-border/50">`)
     for (const symbol of showSymbols) {
       const id = createSymbolId(symbol.kind, symbol.name)
       lines.push(

From 3329ade8e3379a2116ce03857af77f532678e145 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <id@shuuji3.xyz>
Date: Fri, 30 Jan 2026 18:47:57 +0900
Subject: [PATCH 2/2] docs: fix RTL support example in CONTRIBUTING.md

---
 CONTRIBUTING.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index f9b15e4110..d6ea00d2db 100644
--- a/CONTRIBUTING.md
+++ b/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)