feat(style): add cursor class utilities (#17033)

Co-authored-by: John Leider <[email protected]>

packages/docs/src/data/nav.json

@@ -61,6 +61,7 @@
       },
       "border-radius",
       "content",
+      "cursor",
       "display",
       "elevation",
       "flex",

packages/docs/src/examples/cursor/usage.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-container>
+    <v-row justify="space-between">
+      <v-col v-for="cursor in cursors" :key="cursor" cols="3">
+        <v-btn
+          :text="cursor"
+          :class="`cursor-${cursor}`"
+          block
+        ></v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+  const cursors = [
+    'auto',
+    'default',
+    'grab',
+    'grabbing',
+    'help',
+    'move',
+    'none',
+    'not-allowed',
+    'pointer',
+    'progress',
+    'text',
+    'wait',
+  ]
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      cursors: [
+        'auto',
+        'default',
+        'grab',
+        'grabbing',
+        'help',
+        'move',
+        'none',
+        'not-allowed',
+        'pointer',
+        'progress',
+        'text',
+        'wait',
+      ],
+    }),
+  }
+</script>

packages/docs/src/pages/en/styles/cursor.md

@@ -0,0 +1,52 @@
+---
+emphasized: true
+meta:
+  title: Cursor
+  description: Assign a custom cursor to any element.
+  keywords: cursor, utility, helper, class
+related:
+  - /styles/content/
+  - /styles/spacing/
+  - /styles/text-and-typography/
+---
+
+# Cursor
+
+Utilities for controlling the cursor styling when hovering over elements.
+
+<page-features />
+
+## Usage
+
+Apply custom cursor styling to a component or element.
+
+<example file="cursor/usage" />
+
+| Class | Properties | |
+| - | - | - |
+| **cursor-auto** | cursor: auto; | |
+| **cursor-default** | cursor: default; | |
+| **cursor-grab** | cursor: grab; | |
+| **cursor-grabbing** | cursor: grabbing; | |
+| **cursor-help** | cursor: help; | |
+| **cursor-move** | cursor: move; | |
+| **cursor-none** | cursor: none; | |
+| **cursor-not-allowed** | cursor: not-allowed; | |
+| **cursor-pointer** | cursor: pointer; | |
+| **cursor-progress** | cursor: progress; | |
+| **cursor-text** | cursor: text; | |
+| **cursor-wait** | cursor: wait; | |
+
+<entry />
+
+## Disable
+
+Disable the generation of **cursor** utility classes by overwriting the utilities value:
+
+```scss { resource="src/styles/settings.scss" }
+@use 'vuetify/settings' with (
+  $utilities: (
+    "cursor": false,
+  ),
+);
+```

packages/vuetify/src/styles/settings/_utilities.scss

@@ -532,6 +532,12 @@ $utilities: () !default;
         class: position,
         values: static relative fixed absolute sticky
       ),
+      // Cursor
+      "cursor": (
+        property: cursor,
+        class: cursor,
+        values: auto default pointer wait text move help not-allowed progress grab grabbing none
+      ),
       // Sizing
       "fill-height": (
         property: height,