Add new interactions utilities to v4

- Adds .user-select-* utils from v5
- Adds .cursor-pointer util, one of the top requested features in our issues
- Adds new docs page to demonstrate both
- Includes Sass lists for customizing

scss/_variables.scss

@@ -1138,6 +1138,8 @@ $pre-scrollable-max-height:         340px !default;
 $displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
 $overflows: auto, hidden !default;
 $positions: static, relative, absolute, fixed, sticky !default;
+$user-selects: all, auto, none !default;
+$cursors: pointer !default;
 
 
 // Printing

scss/utilities/_interactions.scss

@@ -0,0 +1,9 @@
+// stylelint-disable declaration-no-important
+
+@each $value in $user-selects {
+  .user-select-#{$value} { user-select: $value !important; }
+}
+
+@each $value in $cursors {
+  .cursor-#{$value} { cursor: $value !important; }
+}

site/_data/nav.yml

@@ -64,6 +64,7 @@
     - title: Flex
     - title: Float
     - title: Image replacement
+    - title: Interactions
     - title: Overflow
     - title: Position
     - title: Screen readers

site/docs/4.4/utilities/interactions.md

@@ -0,0 +1,30 @@
+---
+layout: docs
+title: Interactions
+description: Utility classes that change how users interact with contents of a website.
+group: utilities
+---
+
+## Text selection
+
+Change the way in which the content is selected when the user interacts with it.
+
+{% capture example %}
+<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
+<p class="user-select-auto">This paragraph has the default select behavior.</p>
+<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
+{% endcapture %}
+{% include example.html content=example %}
+
+Customize the available classes by changing the `$user-selects` Sass list in `_variables.scss`.
+
+## Cursors
+
+Change the cursor from a default value to `pointer` with our built-in utility.
+
+{% capture example %}
+<span role="button" class="cursor-pointer">Non-button element button</span>
+{% endcapture %}
+{% include example.html content=example %}
+
+Customize the available classes by changing the `$cursors` Sass list in `_variables.scss`.