feat: use default cursor for non-link items (#1216)

app/assets/main.css

···
   margin: 0;
 }
 
-/* Reset button styles */
-button {
-  cursor: pointer;
-}
-
 /* Selection */
 ::selection {
   background-color: var(--fg-muted);

app/components/ColumnPicker.vue

···
               v-for="column in toggleableColumns"
               :key="column.id"
               class="flex gap-2 items-center px-3 py-2 transition-colors duration-200"
-              :class="
-                column.disabled
-                  ? 'opacity-50 cursor-not-allowed'
-                  : 'hover:bg-bg-muted cursor-pointer'
-              "
+              :class="column.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-bg-muted'"
             >
               <input
                 type="checkbox"

app/components/DependencyPathPopup.vue

···
     <!-- 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 cursor-pointer 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-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"
       :aria-expanded="isOpen"
       @click.stop="togglePopup"
     >

app/components/Header/AuthModal.client.vue

···
 
         <details class="text-sm">
           <summary
-            class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200 focus-visible:(outline-2 outline-accent/70)"
+            class="text-fg-subtle hover:text-fg-muted transition-colors duration-200 focus-visible:(outline-2 outline-accent/70)"
           >
             {{ $t('auth.modal.what_is_atmosphere') }}
           </summary>

app/components/Header/ConnectorModal.vue

···
         </div>
 
         <details class="text-sm">
-          <summary
-            class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200"
-          >
+          <summary class="text-fg-subtle hover:text-fg-muted transition-colors duration-200">
             {{ $t('connector.modal.advanced') }}
           </summary>
           <div class="mt-3">

app/components/Org/OperationsQueue.vue

···
     <!-- Completed operations log (collapsed by default) -->
     <details v-if="hasCompletedOperations" class="mt-4 border-t border-border pt-4">
       <summary
-        class="flex items-center gap-2 font-mono text-xs text-fg-muted cursor-pointer hover:text-fg transition-colors duration-200 select-none"
+        class="flex items-center gap-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 select-none"
       >
         <span
           class="i-carbon:chevron-right rtl-flip w-3 h-3 transition-transform duration-200 [[open]>&]:rotate-90"

app/components/Package/ClaimPackageModal.vue

···
           <!-- Expandable package.json preview -->
           <details class="border border-border rounded-md overflow-hidden">
             <summary
-              class="px-3 py-2 text-sm text-fg-muted bg-bg-subtle cursor-pointer hover:text-fg transition-colors select-none"
+              class="px-3 py-2 text-sm text-fg-muted bg-bg-subtle hover:text-fg transition-colors select-none"
             >
               {{ $t('claim.modal.preview_json') }}
             </summary>

app/components/Package/ListControls.vue

···
         <select
           id="package-sort"
           v-model="sortValue"
-          class="appearance-none bg-bg-subtle border border-border rounded-lg ps-3 pe-8 py-2 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 focus:(border-border-hover outline-none) hover:border-border-hover"
+          class="appearance-none bg-bg-subtle border border-border rounded-lg ps-3 pe-8 py-2 font-mono text-sm text-fg transition-colors duration-200 focus:(border-border-hover outline-none) hover:border-border-hover"
         >
           <option v-for="option in sortOptions" :key="option.value" :value="option.value">
             {{ option.label }}

app/components/Package/ListToolbar.vue

···
             <select
               id="sort-select"
               :value="currentSort.key"
-              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"
+              class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1.5 font-mono text-sm text-fg transition-colors duration-200 hover:border-border-hover"
               @change="handleSortKeyChange"
             >
               <option

app/components/Package/ManagerSelect.vue

···
           :key="pm.id"
           role="option"
           :aria-selected="selectedPM === pm.id"
-          class="flex items-center gap-2 px-3 py-1.5 font-mono text-xs cursor-pointer transition-colors duration-150"
+          class="flex items-center gap-2 px-3 py-1.5 font-mono text-xs transition-colors duration-150"
           :class="[
             selectedPM === pm.id ? 'text-fg' : 'text-fg-subtle',
             highlightedIndex === index ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',

app/components/Package/Table.vue

···
             scope="col"
             class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none 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('name'),
+              'hover:text-fg transition-colors duration-200': isSortable('name'),
             }"
             :aria-sort="
               isColumnSorted('name')
···
             scope="col"
             class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none 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'),
+              'hover:text-fg transition-colors duration-200': isSortable('downloads'),
             }"
             :aria-sort="
               isColumnSorted('downloads')
···
             scope="col"
             class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none 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('updated'),
+              'hover:text-fg transition-colors duration-200': isSortable('updated'),
             }"
             :aria-sort="
               isColumnSorted('updated')

app/components/PaginationControls.vue

···
         <select
           id="page-size"
           :value="pageSize"
-          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"
+          class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1 font-mono text-sm text-fg transition-colors duration-200 hover:border-border-hover"
           @change="handlePageSizeChange"
         >
           <option v-for="size in PAGE_SIZE_OPTIONS" :key="size" :value="size">

app/components/Settings/AccentColorPicker.vue

···
     <label
       v-for="color in accentColors"
       :key="color.id"
-      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
+      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
       :style="{ backgroundColor: `var(--swatch-${color.id})` }"
     >
       <input
···
       />
     </label>
     <label
-      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) flex items-center justify-center bg-fg"
+      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) flex items-center justify-center bg-fg"
     >
       <input
         type="radio"

app/components/Settings/BgThemePicker.vue

···
     <label
       v-for="theme in backgroundThemes"
       :key="theme.id"
-      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
+      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
       :style="{ backgroundColor: theme.value }"
     >
       <input

app/components/Settings/Toggle.client.vue

···
       {{ label }}
     </span>
     <span
-      class="inline-flex items-center h-6 w-11 shrink-0 rounded-full border p-0.25 transition-colors duration-200 shadow-sm ease-in-out motion-reduce:transition-none cursor-pointer group-focus-visible:(outline-accent/70 outline-offset-2 outline-solid)"
+      class="inline-flex items-center h-6 w-11 shrink-0 rounded-full border p-0.25 transition-colors duration-200 shadow-sm ease-in-out motion-reduce:transition-none group-focus-visible:(outline-accent/70 outline-offset-2 outline-solid)"
       :class="
         checked
           ? 'bg-accent border-accent group-hover:bg-accent/80'

app/components/Tag/RadioButton.vue

···
       class="peer sr-only"
     />
     <label
-      class="bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover) inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 peer-focus-visible:(outline-2 outline-accent/70 outline-offset-2) border-none cursor-pointer peer-checked:(bg-fg text-bg border-fg hover:(text-text-bg/50)) peer-disabled:(opacity-50 pointer-events-none)"
+      class="bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover) inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 peer-focus-visible:(outline-2 outline-accent/70 outline-offset-2) border-none peer-checked:(bg-fg text-bg border-fg hover:(text-text-bg/50)) peer-disabled:(opacity-50 pointer-events-none)"
       :htmlFor="internalId"
     >
       <slot />

app/components/UserCombobox.vue

···
           :key="username"
           role="option"
           :aria-selected="highlightedIndex === index"
-          class="px-2 py-1 font-mono text-sm cursor-pointer transition-colors duration-100"
+          class="px-2 py-1 font-mono text-sm transition-colors duration-100"
           :class="
             highlightedIndex === index
               ? 'bg-bg-muted text-fg'

app/components/VersionSelector.vue

···
               flatItems[focusedIndex]?.groupId === group.id &&
               flatItems[focusedIndex]?.type === 'group'
             "
-            class="flex items-center gap-2 px-3 py-2 text-sm font-mono hover:bg-bg-muted transition-[color,background-color] focus-visible:outline-none cursor-pointer"
+            class="flex items-center gap-2 px-3 py-2 text-sm font-mono hover:bg-bg-muted transition-[color,background-color] focus-visible:outline-none"
             :class="[
               group.primaryVersion.isCurrent ? 'text-fg bg-bg-muted' : 'text-fg-muted',
               flatItems[focusedIndex]?.groupId === group.id &&

app/pages/settings.vue

···
               <select
                 id="theme-select"
                 :value="colorMode.preference"
-                class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg cursor-pointer duration-200 transition-colors hover:border-fg-subtle"
+                class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg duration-200 transition-colors hover:border-fg-subtle"
                 @change="
                   colorMode.preference = ($event.target as HTMLSelectElement).value as
                     | 'light'
···
                 <select
                   id="language-select"
                   :value="locale"
-                  class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-accent/70 cursor-pointer duration-200 transition-colors hover:border-fg-subtle"
+                  class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-accent/70 duration-200 transition-colors hover:border-fg-subtle"
                   @change="setLocale(($event.target as HTMLSelectElement).value as typeof locale)"
                 >
                   <option v-for="loc in locales" :key="loc.code" :value="loc.code" :lang="loc.code">