Tiptap RTE: Adds hover and focus border input states (#20172)

* added hovering and focus border to RTE

* fix main to OG

* fix to main again

* I'm going to cry

* added hovering and focus border to RTE

* fix indentation

* Refactored to set `--umb-tiptap-edge-border-color` variable

so that the toolbar and statusbar can pick up the state changes.

* Applies `transition` to the toolbar/statusbar components

---------

Co-authored-by: Oskar kruger <obk@umbraco.dk>
Co-authored-by: leekelleher <leekelleher@gmail.com>

src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts

@@ -266,6 +266,15 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 				max-width: var(--umb-rte-max-width, 100%);
 			}
 
+			:host(:hover) {
+				--umb-tiptap-edge-border-color: var(--uui-color-border-standalone);
+			}
+
+			:host(:focus),
+			:host(:focus-within) {
+				--umb-tiptap-edge-border-color: var(--uui-color-border-emphasis);
+			}
+
 			:host([readonly]) {
 				pointer-events: none;
 
@@ -335,6 +344,12 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 				}
 			}
 
+			#editor,
+			umb-tiptap-toolbar,
+			umb-tiptap-statusbar {
+				transition: border-color 120ms ease-out;
+			}
+
 			umb-tiptap-toolbar + #editor {
 				border-top: 0;
 				border-top-left-radius: 0;