From cd1cbb3b154cc90004827f2ec458abd889b5c2b0 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@mcb.dk>
Date: Fri, 3 Oct 2025 07:53:21 +0200
Subject: [PATCH] Color Picker: Styling for drag handle at swatch items
 (#20360)

Add styling for drag handle at color picker item input
---
 .../multiple-color-picker-item-input.element.ts        | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts
index 43ae759be6..36f6ec4345 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts
@@ -160,7 +160,7 @@ export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin(
 		return html`
 			<umb-form-validation-message id="validation-message" @invalid=${this.#onInvalid} @valid=${this.#onValid}>
 				<div id="item">
-					${this.disabled || this.readonly ? nothing : html`<uui-icon name="icon-grip"></uui-icon>`}
+					${this.disabled || this.readonly ? nothing : html`<uui-icon name="icon-grip" class="handle"></uui-icon>`}
 					<div class="color-wrapper">
 						<uui-input
 							id="input"
@@ -265,6 +265,14 @@ export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin(
 				margin: 0;
 				position: absolute;
 			}
+
+			.handle {
+				cursor: grab;
+			}
+
+			.handle:active {
+				cursor: grabbing;
+			}
 		`,
 	];
 }