Merge branch 'main' into i18n/01-30

# Conflicts:
#	i18n/locales/zh-CN.json
#	lunaria/files/zh-CN.json

Author: 9romise

app/assets/main.css

@@ -154,7 +154,7 @@ button {
 
 /* Skip link */
 .skip-link {
-  position: absolute;
+  position: fixed;
   top: -100%;
   left: 0;
   padding: 0.5rem 1rem;
@@ -165,6 +165,15 @@ button {
   transition: top 0.2s ease;
 }
 
+html[dir='rtl'] .skip-link {
+  left: unset;
+  right: 0;
+}
+
+.skip-link:hover {
+  color: var(--bg);
+  text-decoration: underline;
+}
 .skip-link:focus {
   top: 0;
 }

app/components/AccentColorPicker.vue

@@ -2,6 +2,17 @@
 import { useAccentColor } from '~/composables/useSettings'
 
 const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
+
+onPrehydrate(el => {
+  const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
+  const id = settings.accentColorId
+  if (id) {
+    const input = el.querySelector<HTMLInputElement>(`input[value="${id}"]`)
+    if (input) {
+      input.checked = true
+    }
+  }
+})
 </script>
 
 <template>

app/components/OrgMembersPanel.vue

@@ -286,11 +286,7 @@ watch(lastExecutionTime, () => {
 </script>
 
 <template>
-  <section
-    v-if="isConnected"
-    aria-labelledby="members-heading"
-    class="bg-bg-subtle border border-border rounded-lg overflow-hidden"
-  >
+  <section v-if="isConnected" class="bg-bg-subtle border border-border rounded-lg overflow-hidden">
     <!-- Header -->
     <div class="flex items-center justify-between p-4 border-b border-border">
       <h2 id="members-heading" class="font-mono text-sm font-medium flex items-center gap-2">

app/components/OrgTeamsPanel.vue

@@ -255,11 +255,7 @@ watch(lastExecutionTime, () => {
 </script>
 
 <template>
-  <section
-    v-if="isConnected"
-    aria-labelledby="teams-heading"
-    class="bg-bg-subtle border border-border rounded-lg overflow-hidden"
-  >
+  <section v-if="isConnected" class="bg-bg-subtle border border-border rounded-lg overflow-hidden">
     <!-- Header -->
     <div class="flex items-center justify-start p-4 border-b border-border">
       <h2 id="teams-heading" class="font-mono text-sm font-medium flex items-center gap-2">

app/components/PackageAccessControls.vue

@@ -150,7 +150,7 @@ watch(
 </script>
 
 <template>
-  <section v-if="isConnected && orgName" aria-labelledby="access-heading">
+  <section v-if="isConnected && orgName">
     <div class="flex items-center justify-between mb-3">
       <h2 id="access-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
         {{ $t('package.access.title') }}

app/components/PackageDependencies.vue

@@ -70,12 +70,7 @@ const sortedOptionalDependencies = computed(() => {
 <template>
   <div class="space-y-8">
     <!-- Dependencies -->
-    <section
-      id="dependencies"
-      v-if="sortedDependencies.length > 0"
-      aria-labelledby="dependencies-heading"
-      class="scroll-mt-20"
-    >
+    <section id="dependencies" v-if="sortedDependencies.length > 0" class="scroll-mt-20">
       <h2
         id="dependencies-heading"
         class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
@@ -167,12 +162,7 @@ const sortedOptionalDependencies = computed(() => {
     </section>
 
     <!-- Peer Dependencies -->
-    <section
-      id="peer-dependencies"
-      v-if="sortedPeerDependencies.length > 0"
-      aria-labelledby="peer-dependencies-heading"
-      class="scroll-mt-20"
-    >
+    <section id="peer-dependencies" v-if="sortedPeerDependencies.length > 0" class="scroll-mt-20">
       <h2
         id="peer-dependencies-heading"
         class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
@@ -239,7 +229,6 @@ const sortedOptionalDependencies = computed(() => {
     <section
       id="optional-dependencies"
       v-if="sortedOptionalDependencies.length > 0"
-      aria-labelledby="optional-dependencies-heading"
       class="scroll-mt-20"
     >
       <h2

app/components/PackageDeprecatedTree.vue

@@ -43,11 +43,7 @@ function getDepthStyle(depth: DependencyDepth) {
 </script>
 
 <template>
-  <section
-    v-if="status === 'success' && hasDeprecated"
-    aria-labelledby="deprecated-tree-heading"
-    class="relative"
-  >
+  <section v-if="status === 'success' && hasDeprecated" class="relative">
     <div class="rounded-lg border overflow-hidden" :class="bannerColor">
       <!-- Header -->
       <button

app/components/PackageDownloadAnalytics.vue

@@ -597,7 +597,7 @@ const config = computed(() => {
             <select
               id="granularity"
               v-model="selectedGranularity"
-              class="w-full bg-transparent font-mono text-sm text-fg outline-none appearance-none"
+              class="w-full bg-bg-subtle font-mono text-sm text-fg outline-none appearance-none"
             >
               <option value="daily">{{ $t('package.downloads.granularity_daily') }}</option>
               <option value="weekly">{{ $t('package.downloads.granularity_weekly') }}</option>
@@ -624,7 +624,7 @@ const config = computed(() => {
                 id="startDate"
                 v-model="startDate"
                 type="date"
-                class="w-full min-w-0 bg-transparent font-mono text-sm text-fg outline-none [color-scheme:dark]"
+                class="w-full min-w-0 bg-transparent font-mono text-sm text-fg outline-none [color-scheme:light] dark:[color-scheme:dark]"
               />
             </div>
           </div>
@@ -644,7 +644,7 @@ const config = computed(() => {
                 id="endDate"
                 v-model="endDate"
                 type="date"
-                class="w-full min-w-0 bg-transparent font-mono text-sm text-fg outline-none [color-scheme:dark]"
+                class="w-full min-w-0 bg-transparent font-mono text-sm text-fg outline-none [color-scheme:light] dark:[color-scheme:dark]"
               />
             </div>
           </div>

app/components/PackageInstallScripts.vue

@@ -18,7 +18,7 @@ const isExpanded = shallowRef(false)
 </script>
 
 <template>
-  <section aria-labelledby="install-scripts-heading">
+  <section>
     <h2
       id="install-scripts-heading"
       class="text-xs text-fg-subtle uppercase tracking-wider mb-3 flex items-center gap-2"

app/components/PackageMaintainers.vue

@@ -168,12 +168,7 @@ watch(
 </script>
 
 <template>
-  <section
-    id="maintainers"
-    v-if="maintainers?.length"
-    aria-labelledby="maintainers-heading"
-    class="scroll-mt-20"
-  >
+  <section id="maintainers" v-if="maintainers?.length" class="scroll-mt-20">
     <h2 id="maintainers-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-3">
       <a
         href="#maintainers"