Merge branch 'main' into fix-lunaria-html-report

Author: userquin

CONTRIBUTING.md

@@ -41,6 +41,7 @@ This focus helps guide our project decisions as a community and what we choose t
   - [Naming conventions](#naming-conventions)
   - [Vue components](#vue-components)
   - [Internal linking](#internal-linking)
+  - [Cursor and navigation](#cursor-and-navigation)
 - [RTL Support](#rtl-support)
 - [Localization (i18n)](#localization-i18n)
   - [Approach](#approach)
@@ -392,6 +393,18 @@ For package links, use the auto-imported `packageRoute()` utility from `app/util
 | `~username`       | `/~:username`                     | `username`                |
 | `~username-orgs`  | `/~:username/orgs`                | `username`                |
 
+### Cursor and navigation
+
+**npmx** uses `cursor: pointer` only for links to match users’ everyday experience. For all other interactive elements, including buttons, use the default cursor (_or another appropriate cursor to indicate state_).
+
+> [!NOTE]
+> A link is any element that leads to another content (_go to another page, authorize_)
+> A button is any element that operates an action (_show tooltip, open menu, "like" package, open dropdown_)
+> If you're unsure which element to use - feel free to ask question in the issue or on discord
+
+> [!IMPORTANT]
+> Always Prefer implementing navigation as real links whenever possible. This ensures they can be opened in a new tab, shared or reloaded, and so the same content is available at a stable URL
+
 ## RTL Support
 
 We support `right-to-left` languages, we need to make sure that the UI is working correctly in both directions.

app/components/AppHeader.vue

@@ -23,7 +23,7 @@ const desktopLinks = computed<NavigationConfig>(() => [
     keyshortcut: 'c',
     type: 'link',
     external: false,
-    iconClass: 'i-carbon:compare',
+    iconClass: 'i-lucide:git-compare',
   },
   {
     name: 'Settings',
@@ -32,7 +32,7 @@ const desktopLinks = computed<NavigationConfig>(() => [
     keyshortcut: ',',
     type: 'link',
     external: false,
-    iconClass: 'i-carbon:settings',
+    iconClass: 'i-lucide:settings',
   },
 ])
 
@@ -55,23 +55,23 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         to: { name: 'about' },
         type: 'link',
         external: false,
-        iconClass: 'i-carbon:information',
+        iconClass: 'i-lucide:info',
       },
       {
         name: 'Privacy Policy',
         label: $t('privacy_policy.title'),
         to: { name: 'privacy' },
         type: 'link',
         external: false,
-        iconClass: 'i-carbon:security',
+        iconClass: 'i-lucide:shield-check',
       },
       {
         name: 'Accessibility',
         label: $t('a11y.title'),
         to: { name: 'accessibility' },
         type: 'link',
         external: false,
-        iconClass: 'i-carbon:accessibility-alt',
+        iconClass: 'i-custom:a11y',
       },
       {
         name: 'Translation Status',
@@ -98,7 +98,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         target: '_blank',
         type: 'link',
         external: true,
-        iconClass: 'i-carbon:document',
+        iconClass: 'i-lucide:file-text',
       },
       {
         name: 'Source',
@@ -107,7 +107,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         target: '_blank',
         type: 'link',
         external: true,
-        iconClass: 'i-carbon:logo-github',
+        iconClass: 'i-simple-icons:github',
       },
       {
         name: 'Social',
@@ -116,7 +116,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         target: '_blank',
         type: 'link',
         external: true,
-        iconClass: 'i-carbon:logo-bluesky',
+        iconClass: 'i-simple-icons:bluesky',
       },
       {
         name: 'Chat',
@@ -125,7 +125,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         target: '_blank',
         type: 'link',
         external: true,
-        iconClass: 'i-carbon:chat',
+        iconClass: 'i-lucide:message-circle',
       },
     ],
   },
@@ -296,7 +296,7 @@ onKeyStroke(
         :aria-expanded="showMobileMenu"
         @click="expandMobileSearch"
         v-if="!isSearchExpanded && !isOnHomePage"
-        classicon="i-carbon:search"
+        classicon="i-lucide:search"
       />
 
       <!-- Mobile: Menu button (always visible, click to open menu) -->
@@ -306,7 +306,7 @@ onKeyStroke(
         :aria-label="$t('nav.open_menu')"
         :aria-expanded="showMobileMenu"
         @click="showMobileMenu = !showMobileMenu"
-        classicon="i-carbon:menu"
+        classicon="i-lucide:menu"
       />
     </nav>
 

app/components/BlueskyPostEmbed.client.vue

@@ -83,7 +83,7 @@ const { data: post, status } = useAsyncData(
         <div class="text-sm text-fg-subtle truncate">@{{ post.author.handle }}</div>
       </div>
       <span
-        class="i-carbon:logo-bluesky w-5 h-5 text-fg-subtle ms-auto shrink-0"
+        class="i-simple-icons:bluesky w-5 h-5 text-fg-subtle ms-auto shrink-0"
         aria-hidden="true"
       />
     </div>
@@ -112,15 +112,15 @@ const { data: post, status } = useAsyncData(
     <div class="flex items-center gap-4 text-sm text-fg-subtle">
       <DateTime :datetime="post.record.createdAt" date-style="medium" />
       <span v-if="post.likeCount" class="flex items-center gap-1">
-        <span class="i-carbon:favorite w-3.5 h-3.5" aria-hidden="true" />
+        <span class="i-lucide:heart w-3.5 h-3.5" aria-hidden="true" />
         {{ post.likeCount }}
       </span>
       <span v-if="post.repostCount" class="flex items-center gap-1">
-        <span class="i-carbon:repeat w-3.5 h-3.5" aria-hidden="true" />
+        <span class="i-lucide:repeat w-3.5 h-3.5" aria-hidden="true" />
         {{ post.repostCount }}
       </span>
       <span v-if="post.replyCount" class="flex items-center gap-1">
-        <span class="i-carbon:chat w-3.5 h-3.5" aria-hidden="true" />
+        <span class="i-lucide:message-circle w-3.5 h-3.5" aria-hidden="true" />
         {{ post.replyCount }}
       </span>
     </div>

app/components/Button/Base.vue

@@ -28,7 +28,7 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group cursor-pointer gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
+    class="group gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
     :class="{
       'inline-flex': !block,
       'flex': block,

app/components/CallToAction.vue

@@ -3,23 +3,23 @@ const socialLinks = computed(() => [
   {
     id: 'github',
     href: 'https://repo.npmx.dev',
-    icon: 'i-carbon:logo-github',
+    icon: 'i-simple-icons:github',
     titleKey: $t('about.get_involved.contribute.title'),
     descriptionKey: $t('about.get_involved.contribute.description'),
     ctaKey: $t('about.get_involved.contribute.cta'),
   },
   {
     id: 'discord',
     href: 'https://chat.npmx.dev',
-    icon: 'i-carbon:chat',
+    icon: 'i-lucide:message-circle',
     titleKey: $t('about.get_involved.community.title'),
     descriptionKey: $t('about.get_involved.community.description'),
     ctaKey: $t('about.get_involved.community.cta'),
   },
   {
     id: 'bluesky',
     href: 'https://social.npmx.dev',
-    icon: 'i-carbon:logo-bluesky',
+    icon: 'i-simple-icons:bluesky',
     titleKey: $t('about.get_involved.follow.title'),
     descriptionKey: $t('about.get_involved.follow.description'),
     ctaKey: $t('about.get_involved.follow.cta'),
@@ -55,7 +55,7 @@ const socialLinks = computed(() => [
           class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto focus-visible:outline-none"
         >
           {{ link.ctaKey }}
-          <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
+          <span class="i-lucide:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
           <span class="absolute z-0 inset-0" aria-hidden="true" />
         </a>
       </div>

app/components/Code/FileTree.vue

@@ -59,7 +59,7 @@ watch(
           :aria-pressed="isNodeActive(node)"
           :style="{ paddingLeft: `${depth * 12 + 12}px` }"
           @click="toggleDir(node.path)"
-          :classicon="isExpanded(node.path) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
+          :classicon="isExpanded(node.path) ? 'i-lucide:chevron-down' : 'i-lucide:chevron-right'"
         >
           <svg
             class="size-[1em] me-1 shrink-0"

app/components/Code/MobileTreeDrawer.vue

@@ -32,7 +32,7 @@ watch(isOpen, open => (isLocked.value = open))
     class="md:hidden fixed bottom-4 inset-ie-4 z-45"
     :aria-label="$t('code.toggle_tree')"
     @click="isOpen = !isOpen"
-    :classicon="isOpen ? 'i-carbon:close' : 'i-carbon:folder'"
+    :classicon="isOpen ? 'i-lucide:x' : 'i-lucide:folder'"
   />
 
   <!-- Backdrop -->
@@ -68,7 +68,7 @@ watch(isOpen, open => (isLocked.value = open))
         <ButtonBase
           :aria-label="$t('code.close_tree')"
           @click="isOpen = false"
-          classicon="i-carbon-close"
+          classicon="i-lucide:x"
         />
       </div>
       <CodeFileTree

app/components/CollapsibleSection.vue

@@ -92,15 +92,11 @@ useHead({
           :aria-label="ariaLabel"
           @click="toggle"
         >
-          <span
-            v-if="isLoading"
-            class="i-carbon:rotate-180 w-3 h-3 motion-safe:animate-spin"
-            aria-hidden="true"
-          />
+          <span v-if="isLoading" class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
           <span
             v-else
             class="w-3 h-3 transition-transform duration-200"
-            :class="isOpen ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
+            :class="isOpen ? 'i-lucide:chevron-down' : 'i-lucide:chevron-right'"
             aria-hidden="true"
           />
         </button>

app/components/ColumnPicker.vue

@@ -75,7 +75,7 @@ function handleReset() {
       aria-haspopup="true"
       :aria-controls="menuId"
       @click.stop="isOpen = !isOpen"
-      classicon="i-carbon-column"
+      classicon="i-lucide:columns-3-cog"
     >
       {{ $t('filters.columns.title') }}
     </ButtonBase>

app/components/Compare/ComparisonGrid.vue

@@ -50,7 +50,7 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
             </LinkBase>
             <TooltipApp v-if="col.replacement" :text="getReplacementTooltip(col)" position="bottom">
               <span
-                class="i-carbon:idea w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
+                class="i-lucide:lightbulb w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
                 role="img"
                 :aria-label="$t('package.replacement.title')"
               />
@@ -69,7 +69,7 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
             {{ $t('compare.no_dependency.label') }}
             <TooltipApp interactive position="bottom">
               <span
-                class="i-carbon:idea w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
+                class="i-lucide:lightbulb w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
                 role="img"
                 :aria-label="$t('compare.no_dependency.tooltip_title')"
               />