fix(color-picker): prevent text selection when using color sliders/field (#10043)

**Related Issue:** #9977

## Summary

Restores prevention of text-selection when using the color
field/sliders.

Author: jcfranco

packages/calcite-components/src/components/color-picker/color-picker.e2e.ts

@@ -7,6 +7,7 @@ import {
   newProgrammaticE2EPage,
   toBeNumber,
   toBeInteger,
+  getElementRect,
 } from "../../tests/utils";
 import { html } from "../../../support/formatting";
 import { CSS, DEFAULT_COLOR, DEFAULT_STORAGE_KEY_PREFIX, DIMENSIONS, SCOPE_SIZE } from "./resources";
@@ -807,6 +808,34 @@ describe("calcite-color-picker", () => {
     expect(hueScopeCenterX).toBe(hueSliderX + sliderWidth - DIMENSIONS.m.thumb.radius);
   });
 
+  it("does not allow text selection when color field/sliders are used", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<calcite-color-picker alpha-channel></calcite-color-picker>`);
+    const { x: hueSliderX, y: hueSliderY } = await getElementRect(page, "calcite-color-picker", `.${CSS.hueSlider}`);
+    const { x: opacitySliderX, y: opacitySliderY } = await getElementRect(
+      page,
+      "calcite-color-picker",
+      `.${CSS.opacitySlider}`,
+    );
+    const { x: colorFieldX, y: colorFieldY } = await getElementRect(page, "calcite-color-picker", `.${CSS.colorField}`);
+
+    const dragStartPoints = [
+      [colorFieldX, colorFieldY],
+      [hueSliderX, hueSliderY],
+      [opacitySliderX, opacitySliderY],
+    ];
+
+    for (const [startingX, startingY] of dragStartPoints) {
+      await page.mouse.move(startingX, startingY);
+      await page.mouse.down();
+      await page.mouse.move(1000, 1000);
+      await page.mouse.up();
+      await page.waitForChanges();
+
+      expect(await page.evaluate(() => window.getSelection().type)).toBe("None");
+    }
+  });
+
   describe("unsupported value handling", () => {
     let page: E2EPage;
 

packages/calcite-components/src/components/color-picker/color-picker.scss

@@ -74,6 +74,11 @@
   @apply flex relative cursor-pointer touch-none;
 }
 
+.color-field,
+.control-and-scope {
+  user-select: none;
+}
+
 .scope {
   @apply text-n1
     focus-base