Merge branch 'main' into chore-add-compare-to-route-rules

Author: userquin

app/components/Code/Viewer.vue

@@ -62,10 +62,11 @@ watch(
 function handleImportLinkNavigate() {
   if (!codeRef.value) return
 
-  const anchors = codeRef.value.querySelectorAll('a.import-link')
+  const anchors = codeRef.value.querySelectorAll<HTMLAnchorElement>('a.import-link')
   anchors.forEach(anchor => {
     // NOTE: We do not need to remove previous listeners because we re-create the entire HTML content on each html update
     anchor.addEventListener('click', event => {
+      if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) return
       const href = anchor.getAttribute('href')
       if (href) {
         event.preventDefault()

app/components/Compare/ReplacementSuggestion.vue

@@ -25,7 +25,7 @@ const docUrl = computed(() => {
     class="flex items-start gap-2 px-3 py-2 rounded-lg text-sm"
     :class="
       variant === 'nodep'
-        ? 'bg-amber-500/10 border border-amber-600/30 text-amber-700 dark:text-amber-400'
+        ? 'bg-amber-500/10 border border-amber-600/30 text-amber-800 dark:text-amber-400'
         : 'bg-blue-500/10 border border-blue-600/30 text-blue-700 dark:text-blue-400'
     "
   >

app/components/DependencyPathPopup.vue

@@ -68,7 +68,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
     <!-- Path badge button -->
     <button
       type="button"
-      class="path-badge font-mono text-3xs px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-700 dark:text-amber-400 transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"
+      class="path-badge font-mono text-3xs px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-800 dark:text-amber-400 transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"
       :aria-expanded="isOpen"
       @click.stop="togglePopup"
     >

app/components/Package/Dependencies.vue

@@ -117,7 +117,7 @@ const numberFormatter = useNumberFormatter()
             <LinkBase
               v-if="getDeprecatedDepInfo(dep)"
               :to="packageRoute(dep, getDeprecatedDepInfo(dep)!.version)"
-              class="shrink-0 text-purple-500"
+              class="shrink-0 text-purple-700 dark:text-purple-500"
               :title="getDeprecatedDepInfo(dep)!.message"
               classicon="i-carbon:warning-hex"
             >

app/components/Package/MetricsBadges.vue

@@ -57,13 +57,13 @@ const typesHref = computed(() => {
   <ul class="flex items-center gap-1.5 list-none m-0 p-0">
     <!-- TypeScript types badge -->
     <li v-if="!props.isBinary" class="contents">
-      <TooltipApp :text="typesTooltip">
+      <TooltipApp :text="typesTooltip" strategy="fixed">
         <LinkBase
           v-if="typesHref"
           variant="button-secondary"
           size="small"
           :to="typesHref"
-          classicon="i-carbon-checkmark"
+          classicon="i-carbon:checkmark"
         >
           {{ $t('package.metrics.types_label') }}
         </LinkBase>
@@ -73,10 +73,10 @@ const typesHref = computed(() => {
           :tabindex="0"
           :classicon="
             isLoading
-              ? 'i-carbon-circle-dash motion-safe:animate-spin'
+              ? 'i-carbon:circle-dash motion-safe:animate-spin'
               : hasTypes
-                ? 'i-carbon-checkmark'
-                : 'i-carbon-close'
+                ? 'i-carbon:checkmark'
+                : 'i-carbon:close'
           "
         >
           {{ $t('package.metrics.types_label') }}
@@ -88,16 +88,17 @@ const typesHref = computed(() => {
     <li class="contents">
       <TooltipApp
         :text="isLoading ? '' : hasEsm ? $t('package.metrics.esm') : $t('package.metrics.no_esm')"
+        strategy="fixed"
       >
         <TagStatic
           tabindex="0"
           :variant="hasEsm && !isLoading ? 'default' : 'ghost'"
           :classicon="
             isLoading
-              ? 'i-carbon-circle-dash motion-safe:animate-spin'
+              ? 'i-carbon:circle-dash motion-safe:animate-spin'
               : hasEsm
-                ? 'i-carbon-checkmark'
-                : 'i-carbon-close'
+                ? 'i-carbon:checkmark'
+                : 'i-carbon:close'
           "
         >
           ESM
@@ -107,12 +108,12 @@ const typesHref = computed(() => {
 
     <!-- CJS badge -->
     <li v-if="isLoading || hasCjs" class="contents">
-      <TooltipApp :text="isLoading ? '' : $t('package.metrics.cjs')">
+      <TooltipApp :text="isLoading ? '' : $t('package.metrics.cjs')" strategy="fixed">
         <TagStatic
           tabindex="0"
           :variant="isLoading ? 'ghost' : 'default'"
           :classicon="
-            isLoading ? 'i-carbon-circle-dash motion-safe:animate-spin' : 'i-carbon-checkmark'
+            isLoading ? 'i-carbon:circle-dash motion-safe:animate-spin' : 'i-carbon:checkmark'
           "
         >
           CJS

app/components/Package/Replacement.vue

@@ -18,7 +18,7 @@ const docPath = computed(() => {
 
 <template>
   <div
-    class="border border-amber-600/40 bg-amber-500/10 rounded-lg px-3 py-2 text-base text-amber-700 dark:text-amber-400"
+    class="border border-amber-600/40 bg-amber-500/10 rounded-lg px-3 py-2 text-base text-amber-800 dark:text-amber-400"
   >
     <h2 class="font-medium mb-1 flex items-center gap-2">
       <span class="i-carbon-idea w-4 h-4" aria-hidden="true" />